:root {
    --ink-strong: #1f1720;
    --ink-contrast: #111;
    --ink-soft: #5e5560;
    --paper: #f6efe2;
    --paper-strong: rgba(255, 250, 241, 0.74);
    --paper-elevated: rgba(255, 250, 241, 0.92);
    --paper-overlay: rgba(255, 250, 241, 0.96);
    --paper-soft: rgba(255, 250, 241, 0.78);
    --paper-highlight: rgba(255, 250, 241, 0.9);
    --paper-pill: rgba(255, 250, 241, 0.68);
    --paper-muted: rgba(246, 239, 226, 0.84);
    --border-subtle: rgba(31, 23, 32, 0.08);
    --border: rgba(31, 23, 32, 0.12);
    --border-medium: rgba(31, 23, 32, 0.14);
    --border-strong: rgba(31, 23, 32, 0.18);
    --border-contrast: rgba(31, 23, 32, 0.3);
    --accent: rgb(0, 48, 93);
    --accent-cool: #395979;
    --shell-flow-block-surface: rgba(211, 207, 199, 0.68);
    --progress-track-shell-surface: color-mix(in srgb, var(--shell-flow-block-surface) 44%, var(--paper));
    --route-accent-catalog: #8b5d21;
    --route-accent-progress: #2e6a4e;
    --route-accent-exercise: var(--accent-cool);
    --status-success-ink: #24573d;
    --status-success-strong: #2e6a4e;
    --status-warning-ink: #8a4b11;
    --status-warning-strong: #8b5d21;
    --status-error-ink: #7a2f35;
    --tag-color-default: var(--accent-cool);
    --tag-color-status: #498877;
    --tag-color-working-tree: #709a4e;
    --tag-color-basics: #d38922;
    --tag-color-branching: #456d9a;
    --tag-color-navigation: #65397e;
    --tag-color-history: #9a5f45;
    --tag-color-cleanup: #b65b5b;
    --tag-color-planning: #c04a77;
    --tag-color-remote: #875ed3;
    --tag-color-inspection: #7a7d39;
    --tag-color-safety: #b04646;
    --tag-color-stash: #56753a;
    --shadow-soft: 0 4px 12px rgba(31, 23, 32, 0.08);
    --shadow-raised: 0 6px 14px rgba(31, 23, 32, 0.08);
    --shadow-raised-strong: 0 6px 14px rgba(31, 23, 32, 0.12);
    --shadow-hover: 0 10px 20px rgba(31, 23, 32, 0.1);
    --shadow-panel-edge: 8px 0 18px rgba(47, 31, 19, 0.08);
    --shadow-panel-edge-hover: 10px 0 20px rgba(47, 31, 19, 0.1);
    --shadow: 0 20px 45px rgba(47, 31, 19, 0.12);
    --surface-card-radius: 18px;
    --surface-panel-radius: 14px;
    --surface-compact-radius: 12px;
    --surface-pill-radius: 999px;
    --surface-card-border: 1px solid var(--border-subtle);
    --surface-card-border-strong: 1px solid var(--border);
    --surface-panel-border: 1px solid var(--border);
    --surface-pill-border: 1px solid var(--border-subtle);
    --surface-pill-border-strong: 1px solid var(--border-strong);
    --surface-pill-border-contrast: 1px solid var(--border-contrast);
    --toolbar-control-border: 1px solid var(--border);
    --toolbar-control-surface: var(--paper-overlay);
    --toolbar-control-shadow: var(--shadow-soft);
}

html,
body {
    width: 100%;
    min-height: 100%;
    height: 100%;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink-strong);
    background:
        radial-gradient(circle at top left, rgba(255, 242, 220, 0.95), transparent 42%),
        radial-gradient(circle at bottom right, rgba(57, 89, 121, 0.16), transparent 34%),
        linear-gradient(160deg, #efe2cb 0%, #f6efe2 48%, #f0e6d8 100%);
    font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

a {
    color: inherit;
}

.eyebrow,
.panel-label,
.control-label,
.result-summary dt {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.panel h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.05;
}

.panel-copy,
.result-summary dd {
    margin: 0;
}

.panel-copy {
    line-height: 1.55;
    color: var(--ink-soft);
}

.masthead-nav a,
.scenario-action,
.scenario-link {
    text-decoration: none;
}

.panel {
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--paper-strong);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.scenario-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #fffaf1;
    border: 1px solid var(--border-subtle);
}

.scenario-action--muted {
    background: var(--accent-cool);
}

.result-summary {
    display: grid;
    gap: 12px;
    margin: 0;
}

.result-summary div {
    display: grid;
    gap: 4px;
}
body {
    overflow: hidden;
}

.page-shell {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-shell {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.app-shell > * {
    flex: 1 1 auto;
    min-height: 0;
}

.workspace-intro {
    padding: 24px;
}

.lesson-layout {
    /* Fallback-значения для статического анализа IDE; реальные токены приходят из panel-layout-config.js. */
    --navigation-lane-width: 340px;
    --navigation-lane-current-width: var(--navigation-lane-width);
    --navigation-toolbar-height: 26px;
    --layout-top-strip-height: 0px;
    --navigation-collapse-duration: 500ms;
    --navigation-collapse-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --panel-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --navigation-active-marker-easing: cubic-bezier(0.2, 0.9, 0.25, 1);
    --lesson-lane-min-width: 400px;
    --lesson-collapsed-left-inset: 18px;
    --practice-lane-default-width: 840px;
    --practice-lane-min-width: 500px;
    --practice-lane-current-min-width: var(--practice-lane-min-width);
    --practice-lane-current-width: var(--practice-lane-default-width);
    --flow-subtask-enter-duration: 220ms;
    --flow-subtask-enter-stagger: 36ms;
    --flow-node-filter-duration: 220ms;
    --flow-node-layout-duration: 280ms;
    --flow-subtask-shift-duration: 220ms;
    --panel-overlay-fade-duration: 180ms;
    --panel-overlay-path-duration: 240ms;
    --panel-overlay-dot-delay-duration: 60ms;
    --navigation-active-marker-min-height: 24px;
    --navigation-active-marker-top: 0px;
    --navigation-active-marker-height: 0px;
    display: grid;
    position: relative;
    grid-template-areas:
        "top top top"
        "navigation lesson practice";
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns:
        var(--navigation-lane-current-width)
        minmax(var(--lesson-lane-min-width), 1fr)
        minmax(
            var(--practice-lane-current-min-width),
            clamp(
                var(--practice-lane-current-min-width),
                calc((100% - var(--navigation-lane-current-width)) / 2),
                var(--practice-lane-current-width)
            )
        );
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    padding-left: var(--navigation-toolbar-height);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--paper-strong);
    align-items: stretch;
    isolation: isolate;
    transition: grid-template-columns var(--navigation-collapse-duration) var(--navigation-collapse-easing);
}

.lesson-layout__top {
    grid-area: top;
    min-width: 0;
    width: calc(100% + var(--navigation-toolbar-height));
    display: grid;
    align-content: start;
    padding: 0;
    margin-left: calc(-1 * var(--navigation-toolbar-height));
    z-index: 5;
}

.lesson-layout__top:empty {
    display: none;
    padding: 0;
}

.lesson-layout--navigation-collapsed {
    --navigation-lane-current-width: 0px;
}

.lesson-layout--practice-hidden {
    --practice-lane-current-min-width: 0px;
    --practice-lane-current-width: 0px;
}

.lesson-layout--practice-hidden .lesson-layout__lane--lesson {
    grid-column: lesson-start / practice-end;
}

.lesson-layout--practice-visibility-transition-suppressed {
    transition: none;
}

.lesson-layout--practice-visibility-transition-suppressed .lesson-layout__lane--practice,
.lesson-layout--practice-visibility-transition-suppressed .lesson-lane--practice,
.lesson-layout--practice-visibility-transition-suppressed .lesson-lane--lesson {
    transition: none;
}

.lesson-layout--progress-full-width {
    grid-template-areas:
        "top"
        "lesson";
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
}

.lesson-layout--progress-full-width .lesson-layout__lane--lesson {
    grid-column: 1;
}

.lesson-layout--progress-full-width .lesson-layout__top {
    width: 100%;
    margin-left: 0;
}

.lesson-layout--progress-full-width .lesson-layout__lane--navigation,
.lesson-layout--progress-full-width .lesson-layout__lane--practice,
.lesson-layout--progress-full-width .lesson-layout__tag-connection-overlay,
.lesson-layout--progress-full-width .lesson-layout__navigation-toggle {
    display: none;
}

.lesson-layout__lane {
    min-width: 0;
    min-height: 0;
    display: flex;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.lesson-layout__tag-connection-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 4;
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition:
        opacity calc(var(--navigation-collapse-duration) * 0.9) ease,
        transform var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        filter calc(var(--navigation-collapse-duration) * 0.9) ease;
}


.lesson-layout__navigation-toggle {
    position: absolute;
    top: var(--layout-top-strip-height);
    left: 0;
    bottom: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: var(--navigation-toolbar-height);
    min-width: var(--navigation-toolbar-height);
    height: auto;
    padding: 12px 0;
    border: 0;
    border-right: 1px solid var(--border-medium);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(229, 225, 218, 0.74), rgba(229, 225, 218, 0.74)),
        var(--paper-strong);
    color: var(--ink-strong);
    box-shadow: var(--shadow-panel-edge);
    font: inherit;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.lesson-layout__navigation-toggle:hover,
.lesson-layout__navigation-toggle:focus-visible {
    background: rgba(232, 238, 243, 0.98);
    color: var(--ink-contrast);
    box-shadow: var(--shadow-panel-edge-hover);
    outline: none;
}

.lesson-layout__navigation-toggle:active {
    transform: translateX(1px);
}

.lesson-layout__navigation-toggle-icon {
    display: inline-grid;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-height: 18px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 320ms var(--panel-motion-easing);
    will-change: transform;
}

.lesson-layout__navigation-toggle[aria-expanded="true"] .lesson-layout__navigation-toggle-icon {
    transform: rotate(-360deg);
}

.lesson-layout__navigation-toggle-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-layout__lane--navigation {
    grid-area: navigation;
    min-width: var(--navigation-lane-current-width);
    max-width: var(--navigation-lane-current-width);
    background: transparent;
    transition:
        min-width var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        max-width var(--navigation-collapse-duration) var(--navigation-collapse-easing);
    z-index: 0;
}

.lesson-layout__lane--lesson {
    grid-area: lesson;
    border-left: 0;
    z-index: 2;
}

.lesson-layout__lane--practice {
    grid-area: practice;
    border-left: 0;
    z-index: 3;
    min-width: var(--practice-lane-current-min-width);
    max-width: var(--practice-lane-current-width);
    transition:
        min-width var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        max-width var(--navigation-collapse-duration) var(--navigation-collapse-easing);
}

.lesson-lane {
    --lesson-lane-scroll-fade-size: 18px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 18px 18px 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: hidden;
}

.lesson-lane--navigation {
    width: 100%;
    min-width: var(--navigation-lane-current-width);
    max-width: var(--navigation-lane-width);
    position: relative;
    padding-left: 0;
    transition:
        opacity 140ms ease,
        transform var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        filter var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        visibility 0s linear 0s;
}

.lesson-lane--navigation::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right center;
    background:
        linear-gradient(
            270deg,
            rgba(255, 250, 241, 0.98) 0%,
            var(--paper-elevated) 24%,
            rgba(255, 250, 241, 0.52) 46%,
            rgba(255, 250, 241, 0) 76%
        );
    transition:
        opacity 120ms ease,
        transform var(--navigation-collapse-duration) var(--navigation-collapse-easing);
}

.lesson-lane--navigation .lesson-lane__body {
    direction: rtl;
    padding-top: 8px;
    padding-left: 0;
    padding-right: 0;
    justify-items: start;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
}

.lesson-lane--navigation .lesson-lane__scroll-content {
    direction: ltr;
    position: relative;
    width: 100%;
    min-width: 0;
    padding-left: 18px;
    padding-right: 18px;
}

.lesson-lane--navigation .lesson-lane__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.lesson-lane--navigation .lesson-lane__body::-webkit-scrollbar-thumb {
    background: transparent;
}

.lesson-lane--lesson {
    padding-right: 0;
    padding-left: 0;
    background: transparent;
    transform: translateX(0);
    transform-origin: left center;
    will-change: transform, box-shadow;
    transition:
        transform var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        box-shadow var(--navigation-collapse-duration) var(--navigation-collapse-easing);
}

.lesson-lane--lesson .lesson-lane__body {
    padding-right: 0;
}

.lesson-lane--lesson .lesson-lane__scroll-content {
    padding-right: 18px;
}

.lesson-lane--navigation,
.lesson-lane--lesson,
.lesson-lane--practice {
    background: rgba(255, 250, 241, 0.78);
    background:
        linear-gradient(180deg, rgba(57, 89, 121, 0.08), var(--paper-elevated)),
        var(--paper-strong);
}

.lesson-lane--practice {
    width: 100%;
    min-width: var(--practice-lane-current-min-width);
    max-width: var(--practice-lane-current-width);
    padding-left: 8px;
    padding-right: 15px;
    transition:
        opacity 140ms ease,
        transform var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        filter var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        visibility 0s linear 0s,
        min-width var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        max-width var(--navigation-collapse-duration) var(--navigation-collapse-easing);
}

.lesson-layout--practice-hidden .lesson-layout__lane--practice {
    pointer-events: none;
    background: transparent;
}

.lesson-layout--practice-hidden .lesson-lane--practice {
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    filter: saturate(0.94);
    transition-delay: 0s, 0s, 0s, var(--navigation-collapse-duration), 0s, 0s;
}

.lesson-lane--practice .lesson-lane__scroll-content {
    padding-left: 8px;
    padding-right: 15px;
}

.lesson-layout--compact-navigation-overlay {
    --navigation-lane-current-width: 0px;
}

.lesson-layout--compact-navigation-overlay .lesson-layout__lane--navigation {
    grid-area: lesson;
    width: 100%;
    min-width: 0;
    max-width: none;
    background: transparent;
}

.lesson-layout--compact-navigation-overlay .lesson-layout__lane--lesson {
    grid-area: lesson;
    min-width: 0;
    max-width: none;
}

.lesson-layout--compact-navigation-overlay .lesson-layout__lane--navigation {
    z-index: 2;
}

.lesson-layout--compact-navigation-overlay .lesson-layout__lane--navigation::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--paper-strong);
    opacity: 1;
    pointer-events: none;
    transition: opacity calc(var(--navigation-collapse-duration) * 0.55) ease;
}

.lesson-layout--compact-navigation-overlay:not(.lesson-layout--compact-navigation-visible) .lesson-layout__lane--navigation::before {
    opacity: 0;
}

.lesson-layout--compact-navigation-overlay .lesson-layout__lane--lesson {
    z-index: 1;
}

.lesson-layout--compact-navigation-overlay .lesson-lane--navigation,
.lesson-layout--compact-navigation-overlay .lesson-lane--lesson {
    width: 100%;
    min-width: 0;
    max-width: none;
    transition:
        opacity 140ms ease,
        transform var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        filter var(--navigation-collapse-duration) var(--navigation-collapse-easing),
        visibility 0s linear 0s,
        box-shadow var(--navigation-collapse-duration) var(--navigation-collapse-easing);
}

.lesson-layout--compact-navigation-overlay .lesson-lane--navigation {
    width: var(--navigation-lane-width);
    min-width: var(--navigation-lane-width);
    max-width: var(--navigation-lane-width);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    filter: none;
}

.lesson-layout--compact-navigation-overlay .lesson-lane--lesson {
    padding-left: var(--lesson-collapsed-left-inset);
    padding-right: 0;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    filter: none;
}

.lesson-layout--compact-navigation-overlay .lesson-lane--lesson .lesson-lane__scroll-content {
    padding-left: 0;
}

.lesson-layout--compact-navigation-visible .lesson-layout__lane--lesson {
    pointer-events: none;
}

.lesson-layout--compact-navigation-visible .lesson-lane--lesson {
    opacity: 0;
    visibility: visible;
    transform: none;
    filter: saturate(0.94);
    transition-delay: 0s, 0s, 0s, 0s, 0s;
}

.lesson-layout--navigation-collapsed:not(.lesson-layout--navigation-collapsing) .lesson-layout__tag-connection-overlay,
.lesson-layout--navigation-transitioning .lesson-layout__tag-connection-overlay {
    opacity: 0;
    filter: blur(1px);
}

.lesson-layout--navigation-collapsed .lesson-layout__tag-connection-overlay {
    transform: translateX(calc(-1 * var(--navigation-lane-width)));
}

.lesson-layout--navigation-collapsed.lesson-layout--navigation-collapsing .lesson-layout__tag-connection-overlay {
    opacity: 0;
    filter: blur(1px);
}

.lesson-layout--navigation-collapsed .lesson-lane--navigation {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-10px);
    filter: saturate(0.94);
}

.lesson-layout--navigation-collapsed.lesson-layout--navigation-collapsing .lesson-lane--navigation {
    visibility: visible;
}

.lesson-layout--navigation-collapsed .lesson-lane--navigation::after,
.lesson-layout--navigation-collapsing .lesson-lane--navigation::after {
    opacity: 1;
    transform: scaleX(1);
}

.lesson-layout--navigation-collapsing .lesson-lane--lesson,
.lesson-layout--navigation-collapsed .lesson-lane--lesson {
    padding-left: var(--lesson-collapsed-left-inset);
    transform: none;
    box-shadow: none;
}

.lesson-layout--navigation-collapsing .lesson-lane--lesson .lesson-lane__scroll-content,
.lesson-layout--navigation-collapsed .lesson-lane--lesson .lesson-lane__scroll-content {
    padding-left: 0;
}

.lesson-layout--compact-navigation-visible.lesson-layout--navigation-collapsing .lesson-lane--lesson .lesson-lane__scroll-content,
.lesson-layout--compact-navigation-visible.lesson-layout--navigation-collapsed .lesson-lane--lesson .lesson-lane__scroll-content {
    padding-left: 0;
}

.lesson-lane__header,
.lesson-lane__heading,
.lesson-lane__body {
    display: grid;
    gap: 12px;
}

.lesson-lane__header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.lesson-lane__heading {
    gap: 8px;
}

.lesson-lane__body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-top: var(--lesson-lane-scroll-fade-size);
    padding-bottom: 16px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-gutter: stable;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--lesson-lane-scroll-fade-size),
        #000 calc(100% - var(--lesson-lane-scroll-fade-size)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--lesson-lane-scroll-fade-size),
        #000 calc(100% - var(--lesson-lane-scroll-fade-size)),
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.lesson-lane__scroll-content {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.lesson-lane__body::-webkit-scrollbar {
    width: 12px;
}

.lesson-lane__body::-webkit-scrollbar-track {
    background: transparent;
}

.lesson-lane__body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background: rgba(31, 23, 32, 0.16);
}

.lesson-lane__body::-webkit-scrollbar-thumb:hover {
    background: rgba(31, 23, 32, 0.24);
}

.lesson-lane__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lesson-lane__meta-chip,
.lane-summary__badge {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.74rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.lane-summary {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--paper-muted);
}

.lane-summary__header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
.lesson-rail__summary {
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border: var(--surface-panel-border);
    border-radius: var(--surface-compact-radius);
    background: rgba(255, 250, 241, 0.18);
}

.scenario-legend {
    display: grid;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    align-self: start;
    position: sticky;
    top: var(--lesson-lane-scroll-fade-size);
    z-index: 3;
    padding-top: 1px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    background: transparent;
}

.scenario-legend__guide,
.scenario-legend__guide-panel,
.scenario-legend__guide-content {
    display: grid;
    gap: 8px;
}

.scenario-legend__guide-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: var(--surface-pill-border-strong);
    border-radius: var(--surface-panel-radius);
    background: rgba(144, 146, 148, 0.24);
    color: var(--ink-strong);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-raised);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.scenario-legend__guide-toggle:hover,
.scenario-legend__guide-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: var(--border-contrast);
    background: var(--paper-overlay);
    box-shadow: var(--shadow-hover);
    outline: none;
}

.scenario-legend__guide-toggle-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scenario-legend__guide-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.95rem;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 220ms var(--panel-motion-easing);
}

.scenario-legend__guide[data-navigation-tag-guide="expanded"] .scenario-legend__guide-toggle-icon {
    transform: rotate(90deg);
}

.scenario-legend__guide-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        max-height 220ms var(--panel-motion-easing),
        opacity 180ms ease,
        transform 220ms var(--panel-motion-easing);
}

.scenario-legend__guide[data-navigation-tag-guide="expanded"] .scenario-legend__guide-panel {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scenario-legend__guide-content {
    min-height: 0;
    box-sizing: border-box;
    padding: 12px;
    border: var(--surface-panel-border);
    border-radius: var(--surface-panel-radius);
    background: var(--paper-strong);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
}

.scenario-legend__guide-content .panel-copy,
.scenario-legend__guide-list {
    font: inherit;
    line-height: inherit;
}

.lesson-layout--navigation-collapsing .scenario-legend__guide[data-navigation-tag-guide="expanded"] .scenario-legend__guide-content {
    width: calc(var(--navigation-lane-width) - 36px);
    min-width: calc(var(--navigation-lane-width) - 36px);
}

.lesson-layout--navigation-collapsing .scenario-legend__guide[data-navigation-tag-guide="expanded"],
.lesson-layout--navigation-collapsing .scenario-legend__guide[data-navigation-tag-guide="expanded"] .scenario-legend__guide-panel {
    width: calc(var(--navigation-lane-width) - 36px);
    min-width: calc(var(--navigation-lane-width) - 36px);
}

.scenario-legend__guide-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    color: var(--ink-soft);
    line-height: 1.45;
}

.scenario-legend__tags {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.scenario-legend__row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.scenario-legend__tag {
    --tag-accent: var(--tag-color-default);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
    padding: 0 8px;
    border: var(--surface-pill-border-contrast);
    border-radius: var(--surface-pill-radius);
    background: var(--paper-pill);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.scenario-legend__tag span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scenario-legend__tag:hover,
.scenario-legend__tag:focus-visible {
    transform: translateY(-1px);
    border-color: var(--tag-accent);
    background: var(--paper-highlight);
}

.scenario-legend__tag--active {
    border-color: var(--tag-accent);
    background: color-mix(in srgb, var(--tag-accent) 17%, var(--paper-overlay));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--tag-accent) 16%, transparent);
}

.scenario-legend__tag--active:hover,
.scenario-legend__tag--active:focus-visible {
    border-color: var(--tag-accent);
    background: color-mix(in srgb, var(--tag-accent) 17%, var(--paper-overlay));
}

.scenario-legend__swatch {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    aspect-ratio: 1 / 1;
    border-radius: var(--surface-pill-radius);
    background: var(--tag-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tag-accent) 18%, transparent);
}

.scenario-flow-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    margin: 0 0 10px;
    z-index: 1;
}

.scenario-flow-divider__line {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(31, 23, 32, 0.06) 0%,
        var(--border-strong) 16%,
        var(--border-strong) 84%,
        rgba(31, 23, 32, 0.06) 100%
    );
}

.scenario-flow-divider__toggle {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: var(--surface-pill-border-strong);
    border-radius: var(--surface-pill-radius);
    background: var(--toolbar-control-surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--toolbar-control-shadow);
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.scenario-flow-divider__toggle:hover,
.scenario-flow-divider__toggle:focus-visible {
    border-color: var(--border-contrast);
    color: var(--ink-strong);
    background: var(--paper-overlay);
    box-shadow: var(--shadow-raised-strong);
}

.scenario-flow-divider__toggle:disabled {
    cursor: default;
    opacity: 0.56;
    box-shadow: none;
}

.tag-connection-map {
    --flow-block-active-accent: var(--tag-color-default);
    --navigation-flow-stack-gap: 6px;
    position: relative;
    display: grid;
    gap: 0;
    align-content: start;
    width: 100%;
    min-width: 0;
    padding-left: 20px;
    box-sizing: border-box;
    isolation: isolate;
}

.navigation-flow-rail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 16px;
    pointer-events: none;
    z-index: 2;
}

.navigation-flow-rail--shell {
    left: 8px;
}

.navigation-flow-rail__line {
    position: absolute;
    top: var(--navigation-flow-rail-line-top, 2px);
    bottom: 2px;
    left: 3px;
    width: 2px;
    background: linear-gradient(180deg, var(--border) 0%, rgba(31, 23, 32, 0.04) 100%);
}

.navigation-flow-rail__marker {
    --navigation-active-marker-accent: rgba(72, 72, 72, 0.75);
    --navigation-active-marker-motion-duration: 100ms;
    position: absolute;
    top: 0;
    left: -4px;
    width: 16px;
    height: max(var(--navigation-active-marker-height, 0px), var(--navigation-active-marker-min-height));
    transform: translate3d(0, var(--navigation-active-marker-top, 0px), 0);
    opacity: 0;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
    filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--navigation-active-marker-accent) 18%, transparent));
    transition:
        transform var(--navigation-active-marker-motion-duration) var(--navigation-active-marker-easing),
        height var(--navigation-active-marker-motion-duration) var(--navigation-active-marker-easing),
        opacity 80ms ease;
}

.navigation-flow-rail__marker::before,
.navigation-flow-rail__marker::after {
    content: "";
    position: absolute;
}

.navigation-flow-rail__marker::before {
    top: 0;
    bottom: 0;
    left: 6px;
    width: 4px;
    border-radius: 999px;
    background: var(--navigation-active-marker-accent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--navigation-active-marker-accent) 12%, transparent),
        0 0 18px color-mix(in srgb, var(--navigation-active-marker-accent) 18%, transparent);
}

.navigation-flow-rail__marker::after {
    content: none;
}

.navigation-flow-rail__marker[data-visible="true"] {
    opacity: 1;
}

.navigation-flow-rail__marker--instant {
    transition: none;
}

.navigation-flow-rail__marker--dragging {
    cursor: grabbing;
}

.lesson-lane--navigation[data-marker-dragging="true"] [data-scenario-panel] {
    display: none;
}

.navigation-flow-rail__marker--instant::before,
.navigation-flow-rail__marker--instant::after {
    transition: none;
}

.tag-connection-map__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity var(--panel-overlay-fade-duration) var(--panel-motion-easing);
}

.lesson-layout__tag-connection-overlay.tag-connection-map__canvas {
    z-index: 4;
}

.tag-connection-map__canvas--visible {
    opacity: 1;
}

.tag-connection-map__canvas--instant,
.tag-connection-map__canvas--instant .tag-connection-map__path,
.tag-connection-map__canvas--instant .tag-connection-map__dot {
    transition: none;
}

.tag-connection-map__path {
    --tag-connection-accent: var(--tag-color-branching);
    fill: none;
    stroke: var(--tag-connection-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
    opacity: 0;
    transition: opacity var(--panel-overlay-path-duration) var(--panel-motion-easing);
}

.tag-connection-map__path--lead {
    stroke-width: 2.5;
}

.tag-connection-map__path--branch {
    stroke-width: 2.5;
    opacity: 0.82;
}

.tag-connection-map__canvas--visible .tag-connection-map__path {
    opacity: 0.9;
}

.tag-connection-map__canvas--visible .tag-connection-map__path--branch {
    opacity: 0.82;
}

.tag-connection-map__canvas--visible .tag-connection-map__path--branch-hidden {
    opacity: 0;
}

.tag-connection-map__canvas--visible .tag-connection-map__path--branch-removing {
    opacity: 0;
}

.tag-connection-map__dot {
    --tag-connection-accent: var(--tag-color-branching);
    --tag-connection-dot-opacity-duration: var(--panel-overlay-fade-duration);
    --tag-connection-dot-transform-duration: var(--panel-overlay-path-duration);
    --tag-connection-dot-delay: var(--panel-overlay-dot-delay-duration);
    fill: color-mix(in srgb, var(--tag-connection-accent) 72%, white);
    stroke: var(--paper-elevated);
    stroke-width: 1.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.72);
    transition:
        opacity var(--tag-connection-dot-opacity-duration) ease var(--tag-connection-dot-delay),
        transform var(--tag-connection-dot-transform-duration) var(--panel-motion-easing) var(--tag-connection-dot-delay);
}

.tag-connection-map__dot--visible {
    opacity: 1;
    transform: scale(1);
}

.scenario-legend,
.flow-block-list,
.flow-node,
.flow-subtask-placeholder {
    position: relative;
    z-index: 1;
}

.flow-block-list {
    display: grid;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.flow-block-list > .flow-block,
.flow-block-list > .flow-node {
    margin-top: var(--navigation-flow-stack-gap);
}

.flow-block-list > .flow-block:first-child,
.flow-block-list > .flow-node:first-child {
    margin-top: 0;
}

.flow-node,
.flow-subtask-placeholder {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.flow-node {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding-left: 0;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition:
        grid-template-rows var(--flow-node-layout-duration) var(--panel-motion-easing),
        opacity var(--flow-node-filter-duration) ease,
        transform var(--flow-node-layout-duration) var(--panel-motion-easing),
        margin-top var(--flow-node-layout-duration) var(--panel-motion-easing);
}

.flow-node__body {
    display: grid;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
        opacity var(--flow-node-filter-duration) ease,
        transform var(--flow-node-layout-duration) var(--panel-motion-easing),
        filter var(--flow-node-filter-duration) ease;
}

.flow-node[data-flow-node-filtered="true"] {
    margin-top: 0;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.flow-node[data-flow-node-filtered="true"] .flow-node__body {
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
    filter: blur(1.2px);
}

.flow-block {
    --flow-block-active-accent: var(--tag-color-default);
    --flow-block-active-text-color: color-mix(in srgb, var(--flow-block-active-accent) 72%, #101418 28%);
    position: relative;
    display: grid;
    gap: 4px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 8px;
    border: var(--surface-pill-border-contrast);
    border-radius: var(--surface-compact-radius);
    background: var(--shell-flow-block-surface);
    color: var(--ink-contrast);
    text-decoration: none;
    transform-origin: left center;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 180ms ease;
}

.flow-block--toggle,
.flow-block--subtask {
    border-color: var(--border-contrast);
}

.flow-block[data-flow-block-tag-state-restored="true"] {
    transition:
        color 0ms,
        background-color 0ms,
        border-color 0ms,
        box-shadow 0ms;
}

.flow-block[data-flow-block-active-tag="status"],
.flow-subtask-group[data-flow-subtask-active-tag="status"] {
    --flow-block-active-accent: var(--tag-color-status);
    --flow-subtask-rail-accent: var(--tag-color-status);
}

.flow-block[data-flow-block-active-tag="working-tree"],
.flow-subtask-group[data-flow-subtask-active-tag="working-tree"] {
    --flow-block-active-accent: var(--tag-color-working-tree);
    --flow-subtask-rail-accent: var(--tag-color-working-tree);
}

.flow-block[data-flow-block-active-tag="basics"],
.flow-subtask-group[data-flow-subtask-active-tag="basics"] {
    --flow-block-active-accent: var(--tag-color-basics);
    --flow-subtask-rail-accent: var(--tag-color-basics);
}

.flow-block[data-flow-block-active-tag="branching"],
.flow-subtask-group[data-flow-subtask-active-tag="branching"] {
    --flow-block-active-accent: var(--tag-color-branching);
    --flow-subtask-rail-accent: var(--tag-color-branching);
}

.flow-block[data-flow-block-active-tag="navigation"],
.flow-subtask-group[data-flow-subtask-active-tag="navigation"] {
    --flow-block-active-accent: var(--tag-color-navigation);
    --flow-subtask-rail-accent: var(--tag-color-navigation);
}

.flow-block[data-flow-block-active-tag="history"],
.flow-subtask-group[data-flow-subtask-active-tag="history"] {
    --flow-block-active-accent: var(--tag-color-history);
    --flow-subtask-rail-accent: var(--tag-color-history);
}

.flow-block[data-flow-block-active-tag="cleanup"],
.flow-subtask-group[data-flow-subtask-active-tag="cleanup"] {
    --flow-block-active-accent: var(--tag-color-cleanup);
    --flow-subtask-rail-accent: var(--tag-color-cleanup);
}

.flow-block[data-flow-block-active-tag="planning"],
.flow-subtask-group[data-flow-subtask-active-tag="planning"] {
    --flow-block-active-accent: var(--tag-color-planning);
    --flow-subtask-rail-accent: var(--tag-color-planning);
}

.flow-block[data-flow-block-active-tag="remote"],
.flow-subtask-group[data-flow-subtask-active-tag="remote"] {
    --flow-block-active-accent: var(--tag-color-remote);
    --flow-subtask-rail-accent: var(--tag-color-remote);
}

.flow-block[data-flow-block-active-tag="inspection"],
.flow-subtask-group[data-flow-subtask-active-tag="inspection"] {
    --flow-block-active-accent: var(--tag-color-inspection);
    --flow-subtask-rail-accent: var(--tag-color-inspection);
}

.flow-block[data-flow-block-active-tag="safety"],
.flow-subtask-group[data-flow-subtask-active-tag="safety"] {
    --flow-block-active-accent: var(--tag-color-safety);
    --flow-subtask-rail-accent: var(--tag-color-safety);
}

.flow-block[data-flow-block-active-tag="stash"],
.flow-subtask-group[data-flow-subtask-active-tag="stash"] {
    --flow-block-active-accent: var(--tag-color-stash);
    --flow-subtask-rail-accent: var(--tag-color-stash);
}

.flow-block[data-flow-block-active-tag] {
    color: var(--flow-block-active-text-color);
    border-color: color-mix(in srgb, var(--flow-block-active-accent) 56%, transparent);
    background: color-mix(in srgb, var(--flow-block-active-accent) 10%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--flow-block-active-accent) 10%, transparent);
}

.flow-block[data-flow-block-active-tag]:hover,
.flow-block[data-flow-block-active-tag].flow-block--active,
.flow-block[data-flow-block-active-tag].flow-block--active:hover {
    color: var(--flow-block-active-text-color);
}

.flow-block--active {
    color: #111;
    border-color: color-mix(in srgb, var(--flow-block-active-accent) 72%, transparent);
    background: color-mix(in srgb, var(--flow-block-active-accent) 20%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--flow-block-active-accent) 36%, transparent),
        0 8px 18px color-mix(in srgb, var(--flow-block-active-accent) 12%, transparent);
}

.flow-block--toggle {
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.flow-block--subtask {
    background: color-mix(in srgb, var(--shell-flow-block-surface) 88%, rgba(255, 250, 241, 0.9));
}

.flow-block--subtask.flow-block--active {
    border-color: color-mix(in srgb, var(--flow-block-active-accent) 72%, transparent);
    background: color-mix(in srgb, var(--flow-block-active-accent) 20%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--flow-block-active-accent) 36%, transparent),
        0 8px 18px color-mix(in srgb, var(--flow-block-active-accent) 12%, transparent);
}

.flow-block:hover {
    color: #111;
    border-color: color-mix(in srgb, var(--flow-block-active-accent) 46%, transparent);
    background: color-mix(in srgb, var(--flow-block-active-accent) 12%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--flow-block-active-accent) 10%, transparent);
}

.flow-block--active:hover {
    color: #111;
    border-color: color-mix(in srgb, var(--flow-block-active-accent) 82%, transparent);
    background: color-mix(in srgb, var(--flow-block-active-accent) 24%, transparent);
}

.flow-block--subtask.flow-block--active:hover {
    color: #111;
    border-color: color-mix(in srgb, var(--flow-block-active-accent) 82%, transparent);
    background: color-mix(in srgb, var(--flow-block-active-accent) 24%, transparent);
}

.flow-block--active:not([data-flow-block-active-tag]) {
    border-color: var(--border-contrast);
    background: var(--shell-flow-block-surface);
    box-shadow: none;
}

.flow-block--subtask.flow-block--active:not([data-flow-block-active-tag]) {
    border-color: rgba(31, 23, 32, 0.38);
    box-shadow: inset 0 0 0 1px rgba(31, 23, 32, 0.16);
}

.flow-block-list > .flow-block:nth-child(-n + 3) {
    background-color: rgba(224, 220, 212, 0.9);
    background-image: repeating-linear-gradient(
        -60deg,
        rgba(229, 226, 220, 0.92) 0 12px,
        rgba(225, 222, 216, 0.92) 12px 24px
    );
}

.flow-block-list > .flow-block:nth-child(-n + 3).flow-block--active:not([data-flow-block-active-tag]) {
    background-color: rgba(224, 220, 212, 0.9);
    background-image: repeating-linear-gradient(
        -60deg,
        rgba(229, 226, 220, 0.92) 0 12px,
        rgba(225, 222, 216, 0.92) 12px 24px
    );
}

.flow-block-list > .flow-block:nth-child(-n + 3):hover,
.flow-block-list > .flow-block:nth-child(-n + 3):active,
.flow-block-list > .flow-block:nth-child(-n + 3).flow-block--active:hover,
.flow-block-list > .flow-block:nth-child(-n + 3).flow-block--active:active {
    background-color: var(--paper-overlay);
    background-image: none;
}

.flow-block:hover,
.flow-block.flow-block--active:hover,
.flow-block:active,
.flow-block.flow-block--active:active,
.flow-block[data-flow-block-active-tag]:hover,
.flow-block[data-flow-block-active-tag].flow-block--active:hover,
.flow-block[data-flow-block-active-tag]:active,
.flow-block[data-flow-block-active-tag].flow-block--active:active,
.flow-block--active:not([data-flow-block-active-tag]):hover,
.flow-block--active:not([data-flow-block-active-tag]):active {
    background: var(--paper-overlay);
}

.flow-block[data-navigation-marker-preview-target="true"],
.flow-block[data-navigation-marker-preview-target="true"]:hover {
    color: var(--ink-contrast);
    border-color: color-mix(in srgb, var(--tag-color-navigation) 78%, transparent);
    background: color-mix(in srgb, var(--tag-color-navigation) 18%, rgba(255, 255, 255, 0.72));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--tag-color-navigation) 24%, transparent),
        0 10px 22px color-mix(in srgb, var(--tag-color-navigation) 18%, transparent);
}

.flow-block[data-flow-block-active-tag],
.flow-block[data-flow-block-active-tag]:hover,
.flow-block[data-flow-block-active-tag].flow-block--active,
.flow-block[data-flow-block-active-tag].flow-block--active:hover,
.flow-block[data-flow-block-active-tag].flow-block--subtask.flow-block--active,
.flow-block[data-flow-block-active-tag].flow-block--subtask.flow-block--active:hover {
    color: var(--flow-block-active-text-color);
}

.flow-subtask-group {
    --flow-subtask-leading-space: 14px;
    --flow-subtask-trailing-space: 14px;
    --flow-subtask-rail-accent: transparent;
    --flow-subtask-rail-left-color: transparent;
    --flow-subtask-rail-right-color: transparent;
    --flow-subtask-rail-left-offset: 0px;
    --flow-subtask-rail-right-offset: 0px;
    position: relative;
    display: grid;
    gap: 4px;
    padding-top: 1px;
    padding-left: var(--flow-subtask-leading-space);
    padding-right: var(--flow-subtask-trailing-space);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.flow-subtask-group[data-flow-subtask-shift-animating="true"] {
    transition:
        padding-left var(--flow-subtask-shift-duration) var(--panel-motion-easing),
        padding-right var(--flow-subtask-shift-duration) var(--panel-motion-easing);
}

.flow-subtask-group[data-flow-subtask-tag-state-restored="true"],
.flow-subtask-group[data-flow-subtask-tag-state-restored="true"]::before,
.flow-subtask-group[data-flow-subtask-tag-state-restored="true"]::after {
    transition: none;
}

.flow-subtask-group::before,
.flow-subtask-group::after {
    content: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
}

.flow-subtask-group[data-flow-subtask-shift-animating="true"]::before,
.flow-subtask-group[data-flow-subtask-shift-animating="true"]::after {
    transition:
        left var(--flow-subtask-shift-duration) var(--panel-motion-easing),
        right var(--flow-subtask-shift-duration) var(--panel-motion-easing),
        background-color var(--panel-overlay-fade-duration) ease;
}

.flow-subtask-group::before {
    left: var(--flow-subtask-rail-left-offset);
    background: var(--flow-subtask-rail-left-color);
}

.flow-subtask-group::after {
    right: var(--flow-subtask-rail-right-offset);
    background: var(--flow-subtask-rail-right-color);
}

.tag-connection-map[data-secondary-branch-side="left"] .flow-subtask-group[data-flow-subtask-active-tag] {
    --flow-subtask-leading-space: 6px;
    --flow-subtask-trailing-space: 22px;
    --flow-subtask-rail-right-offset: 10px;
    --flow-subtask-rail-right-color: var(--flow-subtask-rail-accent);
}

.tag-connection-map[data-secondary-branch-side="right"] .flow-subtask-group[data-flow-subtask-active-tag] {
    --flow-subtask-leading-space: 22px;
    --flow-subtask-trailing-space: 6px;
    --flow-subtask-rail-left-offset: 10px;
    --flow-subtask-rail-left-color: var(--flow-subtask-rail-accent);
}

.flow-subtask-group > [data-flow-subtask-enter="true"] {
    animation: flow-subtask-enter var(--flow-subtask-enter-duration) var(--panel-motion-easing) both;
    animation-delay: calc(var(--flow-subtask-enter-index, 0) * var(--flow-subtask-enter-stagger));
    will-change: opacity, transform;
}

.flow-subtask-region {
    overflow: hidden;
    padding-right: 4px;
    box-sizing: border-box;
}

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

.flow-block__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.flow-block__indicator {
    flex: 0 0 auto;
    color: inherit;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.8rem;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 220ms var(--panel-motion-easing);
}

[data-scenario-toggle][aria-expanded="true"] .flow-block__indicator {
    transform: rotate(90deg);
}

.flow-subtask-placeholder {
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px dashed var(--border-contrast);
    border-radius: var(--surface-compact-radius);
    background: rgba(255, 250, 241, 0.46);
}

.flow-subtask-placeholder--error {
    background: rgba(255, 243, 236, 0.72);
}

.flow-block__eyebrow {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
}

.flow-block__title {
    margin: 0;
    line-height: 1.1;
    font-size: 0.82rem;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

@keyframes flow-subtask-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flow-subtask-group[data-flow-subtask-shift-animating="true"],
    .flow-subtask-group[data-flow-subtask-shift-animating="true"]::before,
    .flow-subtask-group[data-flow-subtask-shift-animating="true"]::after {
        transition: none;
    }

    .flow-subtask-group > [data-flow-subtask-enter="true"] {
        animation: none;
        will-change: auto;
    }
}

.scenario-legend__tag--status {
    --tag-accent: var(--tag-color-status);
}

.scenario-legend__tag--working-tree {
    --tag-accent: var(--tag-color-working-tree);
}

.scenario-legend__tag--basics {
    --tag-accent: var(--tag-color-basics);
}

.scenario-legend__tag--branching {
    --tag-accent: var(--tag-color-branching);
}

.scenario-legend__tag--navigation {
    --tag-accent: var(--tag-color-navigation);
}

.scenario-legend__tag--history {
    --tag-accent: var(--tag-color-history);
}

.scenario-legend__tag--cleanup {
    --tag-accent: var(--tag-color-cleanup);
}

.scenario-legend__tag--planning {
    --tag-accent: var(--tag-color-planning);
}

.scenario-legend__tag--remote {
    --tag-accent: var(--tag-color-remote);
}

.scenario-legend__tag--inspection {
    --tag-accent: var(--tag-color-inspection);
}

.scenario-legend__tag--safety {
    --tag-accent: var(--tag-color-safety);
}

.scenario-legend__tag--stash {
    --tag-accent: var(--tag-color-stash);
}

.catalog-controls {
    display: grid;
    gap: 16px;
}

.catalog-controls__form {
    display: grid;
    gap: 16px;
}

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

.catalog-controls__field {
    display: grid;
    gap: 6px;
}

.catalog-controls__field-note {
    color: var(--ink-soft);
    font-size: 0.92rem;
    line-height: 1.45;
}

.catalog-controls__field select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 250, 241, 0.86);
    color: var(--ink-strong);
    font: inherit;
}

.catalog-controls__tags {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: 10px;
}

.catalog-controls__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.catalog-controls__tag-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 250, 241, 0.74);
}

.catalog-controls__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.catalog-controls__summary {
    color: var(--ink-soft);
    line-height: 1.5;
}
.lesson-block {
    display: grid;
    gap: 10px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.lesson-block--highlight {
    background: transparent;
}

.lesson-spotlight {
    display: grid;
    gap: 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.lesson-spotlight--loading {
    background: transparent;
}

.lesson-spotlight__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lesson-spotlight__pill {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.lesson-block--reading {
    gap: 14px;
}

.lesson-block--supporting {
    background: transparent;
}

.lesson-section__header {
    display: grid;
    gap: 6px;
}

.lesson-lead {
    display: grid;
    gap: 10px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
}

.lesson-lead__heading,
.lesson-lead__meta {
    display: grid;
    gap: 8px;
}

.lesson-lead__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lesson-lead__meta-item {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.lesson-list {
    margin: 0;
    padding-left: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.lesson-block__title {
    margin: 0;
    font-weight: 800;
    line-height: 1.05;
}

.task-annotations,
.task-sequence,
.task-steps {
    display: grid;
    gap: 12px;
}

.task-sequence,
.task-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.task-sequence__item,
.task-steps__item,
.task-annotation {
    display: grid;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.task-sequence__item {
    grid-template-columns: auto 1fr;
    align-items: start;
}

.task-sequence__index,
.task-step__position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.76rem;
    text-transform: uppercase;
    color: var(--accent);
}

.task-sequence__copy,
.task-steps__header,
.task-annotation {
    display: grid;
    gap: 6px;
}

.task-sequence__copy p,
.task-steps__item p,
.task-annotation p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
}

.submission-draft__form,
.submission-draft__fields,
.submission-draft__field,
.submission-draft__notice {
    display: grid;
    gap: 10px;
}

.submission-draft__field select,
.submission-draft__field textarea,
.submission-draft__actions button {
    font: inherit;
}

.submission-draft__field select,
.submission-draft__field textarea {
    width: 100%;
    border: var(--surface-card-border-strong);
    border-radius: var(--surface-card-radius);
    background: var(--paper-elevated);
    color: var(--ink-strong);
    padding: 12px 14px;
    resize: vertical;
}

.submission-draft__hint,
.submission-draft__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.submission-draft__notice {
    padding: 14px 16px;
    border: var(--surface-card-border-strong);
    border-radius: var(--surface-card-radius);
    background: var(--paper-soft);
}

.submission-draft__notice--ready {
    background:
        linear-gradient(180deg, rgba(57, 89, 121, 0.08), var(--paper-highlight)),
        var(--paper-soft);
}

.progress-summary-grid,
.progress-activity-list,
.progress-guidance-groups,
.progress-guidance-list {
    display: grid;
    gap: 14px;
}

.progress-top-strip {
    --progress-top-strip-accent: var(--accent-cool);
    --progress-top-strip-shell-fill: var(--shell-flow-block-surface);
    --progress-top-strip-shell-surface: var(--progress-track-shell-surface);
    --progress-top-strip-shell-divider-color: color-mix(in srgb, var(--progress-top-strip-shell-fill) 72%, var(--border));
    --progress-top-strip-surface: color-mix(in srgb, var(--progress-top-strip-accent) 10%, var(--paper));
    --progress-top-strip-fill: color-mix(in srgb, var(--progress-top-strip-accent) 24%, var(--paper));
    --progress-top-strip-divider-color: color-mix(in srgb, var(--progress-top-strip-accent) 30%, var(--border));
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 42px;
    padding: 0;
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid var(--progress-top-strip-divider-color);
    border-radius: 0;
    overflow: hidden;
    background-color: var(--progress-top-strip-surface);
    box-shadow: none;
    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}

.progress-top-strip[data-top-strip-route="catalog"] {
    --progress-top-strip-accent: var(--route-accent-catalog);
}

.progress-top-strip[data-top-strip-route="progress"] {
    --progress-top-strip-accent: var(--route-accent-progress);
}

.progress-top-strip[data-top-strip-route="exercise"] {
    --progress-top-strip-accent: var(--route-accent-exercise);
}

.progress-top-strip[data-top-strip-route="catalog"],
.progress-top-strip[data-top-strip-route="progress"],
.progress-top-strip[data-top-strip-route="exercise"] {
    --progress-top-strip-surface: var(--progress-top-strip-shell-surface);
    --progress-top-strip-fill: var(--progress-top-strip-shell-fill);
    --progress-top-strip-divider-color: var(--progress-top-strip-shell-divider-color);
}

.progress-top-strip[data-top-strip-accent-tag] {
    --progress-top-strip-surface: color-mix(in srgb, var(--progress-top-strip-accent) 10%, var(--paper));
    --progress-top-strip-fill: color-mix(in srgb, var(--progress-top-strip-accent) 24%, var(--paper));
    --progress-top-strip-divider-color: color-mix(in srgb, var(--progress-top-strip-accent) 30%, var(--border));
}

.progress-top-strip[data-top-strip-accent-tag="status"] {
    --progress-top-strip-accent: var(--tag-color-status);
}

.progress-top-strip[data-top-strip-accent-tag="working-tree"] {
    --progress-top-strip-accent: var(--tag-color-working-tree);
}

.progress-top-strip[data-top-strip-accent-tag="basics"] {
    --progress-top-strip-accent: var(--tag-color-basics);
}

.progress-top-strip[data-top-strip-accent-tag="branching"] {
    --progress-top-strip-accent: var(--tag-color-branching);
}

.progress-top-strip[data-top-strip-accent-tag="navigation"] {
    --progress-top-strip-accent: var(--tag-color-navigation);
}

.progress-top-strip[data-top-strip-accent-tag="history"] {
    --progress-top-strip-accent: var(--tag-color-history);
}

.progress-top-strip[data-top-strip-accent-tag="cleanup"] {
    --progress-top-strip-accent: var(--tag-color-cleanup);
}

.progress-top-strip[data-top-strip-accent-tag="planning"] {
    --progress-top-strip-accent: var(--tag-color-planning);
}

.progress-top-strip[data-top-strip-accent-tag="remote"] {
    --progress-top-strip-accent: var(--tag-color-remote);
}

.progress-top-strip[data-top-strip-accent-tag="inspection"] {
    --progress-top-strip-accent: var(--tag-color-inspection);
}

.progress-top-strip[data-top-strip-accent-tag="safety"] {
    --progress-top-strip-accent: var(--tag-color-safety);
}

.progress-top-strip[data-top-strip-accent-tag="stash"] {
    --progress-top-strip-accent: var(--tag-color-stash);
}

.progress-top-strip__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    width: 100%;
    padding: 8px 54px;
    text-align: center;
}

.progress-top-strip__lead,
.progress-top-strip__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.progress-top-strip__meta {
    min-width: 0;
}

.progress-top-strip__nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--surface-pill-radius);
    border: var(--toolbar-control-border);
    background: rgba(255, 250, 241, 0.56);
    color: var(--ink-strong);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    transform: translateY(-50%);
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.progress-top-strip__nav:hover,
.progress-top-strip__nav:focus-visible {
    border-color: rgba(31, 23, 32, 0.24);
    background: rgba(255, 250, 241, 0.82);
    outline: none;
}

.progress-top-strip__nav--previous {
    left: 16px;
}

.progress-top-strip__nav--next {
    right: 16px;
}

.progress-top-strip__meter {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent;
}

.progress-top-strip__meter-value {
    display: block;
    height: 100%;
    background-color: var(--progress-top-strip-fill);
    transition:
        width 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 160ms ease;
    will-change: width;
}

.progress-top-strip__item {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border: var(--surface-pill-border);
    border-radius: var(--surface-pill-radius);
    background: rgba(255, 250, 241, 0.56);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.progress-top-strip__status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(57, 89, 121, 0.12);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.progress-card,
.progress-activity,
.progress-guidance-shell,
.progress-guidance-shell__hero,
.progress-guidance-group,
.progress-recommendation-card {
    display: grid;
    gap: 10px;
}

.progress-card,
.progress-activity,
.progress-guidance-shell {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.progress-guidance-shell__hero,
.progress-guidance-group,
.progress-recommendation-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255, 250, 241, 0.78);
}

.progress-card__header,
.progress-activity__header,
.progress-guidance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.progress-status-marker {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.progress-status-marker--completed {
    color: #285d3b;
}

.progress-status-marker--in_progress,
.progress-status-marker--in-progress {
    color: #8b5d21;
}

.progress-status-marker--not_started,
.progress-status-marker--not-started,
.progress-status-marker--planned {
    color: var(--ink-soft);
}

.progress-guidance-group .lesson-block__title {
    font-size: 1rem;
}

.scenario-action--secondary {
    opacity: 0.86;
}

.submission-draft__actions button {
    cursor: pointer;
    border-width: 1px;
}

.lesson-main-surface {
    --lesson-main-accent: var(--accent-cool);
    --lesson-main-accent-border: color-mix(in srgb, var(--lesson-main-accent) 30%, var(--border));
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 4px 0 18px 22px;
    isolation: isolate;
}

.lesson-main-surface[data-main-panel-route="catalog"] {
    --lesson-main-accent: var(--route-accent-catalog);
}

.lesson-main-surface[data-main-panel-route="progress"] {
    --lesson-main-accent: var(--route-accent-progress);
}

.lesson-main-surface[data-main-panel-route="exercise"] {
    --lesson-main-accent: var(--route-accent-exercise);
}

.lesson-main-surface::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 16px;
    left: 5px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--lesson-main-accent) 44%, transparent) 0%,
        var(--border-subtle) 100%
    );
    box-shadow: 0 0 22px color-mix(in srgb, var(--lesson-main-accent) 16%, transparent);
}

.lesson-main-surface::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lesson-main-accent) 82%, #fffaf1 18%);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--lesson-main-accent) 14%, transparent),
        0 8px 18px color-mix(in srgb, var(--lesson-main-accent) 18%, transparent);
}

.lesson-main-surface__body {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
}

.lesson-lane--lesson .lesson-lead,
.lesson-lane--lesson .lesson-spotlight,
.lesson-lane--lesson .lesson-block,
.lesson-lane--lesson .progress-card,
.lesson-lane--lesson .progress-activity,
.lesson-lane--lesson .progress-guidance-shell {
    position: relative;
    overflow: hidden;
    border-bottom: 0;
    border-radius: 24px;
    border: 1px solid var(--lesson-main-accent-border);
    background: transparent;
    box-shadow: none;
}

.lesson-lane--lesson .lesson-lead::before,
.lesson-lane--lesson .lesson-spotlight::before,
.lesson-lane--lesson .lesson-block::before,
.lesson-lane--lesson .progress-card::before,
.lesson-lane--lesson .progress-activity::before,
.lesson-lane--lesson .progress-guidance-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--lesson-main-accent) 38%, transparent) 0%,
        rgba(255, 255, 255, 0.75) 50%,
        color-mix(in srgb, var(--lesson-main-accent) 22%, transparent) 100%
    );
}

.lesson-lane--lesson .lesson-lead {
    grid-template-columns: minmax(0, 1fr) minmax(200px, auto);
    gap: 18px;
    padding: 20px 22px 22px;
    background: transparent;
}

.lesson-lane--lesson .lesson-lead::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--lesson-main-accent) 72%, #fffaf1 28%) 0%,
        color-mix(in srgb, var(--lesson-main-accent) 24%, transparent) 100%
    );
}

.lesson-lane--lesson .lesson-lead__heading,
.lesson-lane--lesson .lesson-lead__meta,
.lesson-lane--lesson .lesson-spotlight > *,
.lesson-lane--lesson .lesson-block > *,
.lesson-lane--lesson .progress-card > *,
.lesson-lane--lesson .progress-activity > *,
.lesson-lane--lesson .progress-guidance-shell > * {
    position: relative;
    z-index: 1;
}

.lesson-lane--lesson .lesson-lead__meta {
    align-content: start;
    align-self: stretch;
    padding: 12px 14px;
    border-radius: var(--surface-card-radius);
    border: 1px solid color-mix(in srgb, var(--lesson-main-accent) 22%, transparent);
    background: transparent;
}

.lesson-lane--lesson .lesson-lead__meta-item,
.lesson-lane--lesson .lesson-spotlight__pill,
.lesson-lane--lesson .progress-status-marker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--surface-pill-radius);
    border: 1px solid color-mix(in srgb, var(--lesson-main-accent) 18%, var(--border-subtle));
    background: transparent;
    box-shadow: none;
}

.lesson-lane--lesson .lesson-lead__meta-item {
    font-size: 0.72rem;
}

.lesson-lane--lesson .lesson-spotlight,
.lesson-lane--lesson .lesson-block,
.lesson-lane--lesson .progress-card,
.lesson-lane--lesson .progress-activity,
.lesson-lane--lesson .progress-guidance-shell {
    padding: 18px 20px 20px;
}

.lesson-lane--lesson .lesson-spotlight {
    gap: 14px;
    background: transparent;
}

.lesson-lane--lesson .lesson-block--reading {
    gap: 16px;
}

.lesson-lane--lesson .lesson-section__header {
    gap: 8px;
}

.lesson-lane--lesson .lesson-block__title {
    font-size: 1.08rem;
}

.lesson-lane--lesson .task-sequence,
.lesson-lane--lesson .task-steps,
.lesson-lane--lesson .task-annotations,
.lesson-lane--lesson .progress-summary-grid,
.lesson-lane--lesson .progress-activity-list,
.lesson-lane--lesson .progress-guidance-groups,
.lesson-lane--lesson .progress-guidance-list {
    gap: 12px;
}

.lesson-lane--lesson .task-sequence__item,
.lesson-lane--lesson .task-steps__item,
.lesson-lane--lesson .task-annotation,
.lesson-lane--lesson .progress-guidance-shell__hero,
.lesson-lane--lesson .progress-guidance-group,
.lesson-lane--lesson .progress-recommendation-card,
.lesson-lane--lesson .catalog-controls__field,
.lesson-lane--lesson .catalog-controls__tags {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--lesson-main-accent) 16%, var(--border-subtle));
    border-radius: var(--surface-card-radius);
    background: transparent;
    box-shadow: none;
}

.lesson-lane--lesson .task-sequence__item,
.lesson-lane--lesson .task-steps__item,
.lesson-lane--lesson .task-annotation {
    border-bottom: 0;
}

.lesson-lane--lesson .task-sequence__index {
    min-width: 34px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: var(--surface-compact-radius);
    border: 1px solid color-mix(in srgb, var(--lesson-main-accent) 24%, transparent);
    background: transparent;
    box-shadow: none;
}

.lesson-lane--lesson .task-step__position {
    justify-self: start;
    min-height: 28px;
    padding: 0 10px;
    border-radius: var(--surface-pill-radius);
    border: 1px solid color-mix(in srgb, var(--lesson-main-accent) 20%, transparent);
    background: transparent;
}

.lesson-lane--lesson .catalog-controls__form,
.lesson-lane--lesson .catalog-controls__grid {
    gap: 14px;
}

.lesson-lane--lesson .catalog-controls__field select {
    border-radius: var(--surface-panel-radius);
    background: transparent;
}

.lesson-lane--lesson .catalog-controls__tag-option {
    background: transparent;
    border-color: color-mix(in srgb, var(--lesson-main-accent) 16%, var(--border-subtle));
}

.lesson-lane--lesson .catalog-controls__actions {
    align-items: flex-start;
}

.lesson-lane--lesson .progress-guidance-shell {
    gap: 16px;
}

.lesson-lane--lesson .progress-guidance-shell__hero {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--lesson-main-accent) 12%, transparent), transparent 50%),
        linear-gradient(160deg, color-mix(in srgb, var(--lesson-main-accent) 10%, rgba(255, 250, 241, 0.98)), rgba(255, 250, 241, 0.88));
}

@media (max-width: 960px) {
    .lesson-main-surface {
        padding-left: 18px;
    }

    .lesson-lane--lesson .lesson-lead {
        grid-template-columns: 1fr;
    }

    .lesson-lane--lesson .catalog-controls__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .progress-top-strip__body {
        padding: 8px 44px;
    }

    .progress-top-strip__meta {
        justify-content: center;
    }

    .lesson-main-surface {
        padding-left: 14px;
    }

    .lesson-main-surface::before {
        left: 3px;
    }

    .task-sequence__item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .progress-card__header,
    .progress-activity__header,
    .progress-guidance-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .submission-draft__hint,
    .submission-draft__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lesson-lane--lesson .lesson-lead,
    .lesson-lane--lesson .lesson-spotlight,
    .lesson-lane--lesson .lesson-block,
    .lesson-lane--lesson .progress-card,
    .lesson-lane--lesson .progress-activity,
    .lesson-lane--lesson .progress-guidance-shell {
        padding: 16px;
        border-radius: 20px;
    }
}
.practice-stack {
    --practice-viewer-height: 700px;
    --workspace-panel-accent: var(--tag-color-default);
    --workspace-command-active-accent: var(--tag-color-default);
    --workspace-command-active-text-color: color-mix(in srgb, var(--workspace-command-active-accent) 72%, #101418 28%);
    --workspace-panel-border-color: var(--border-contrast);
    --workspace-panel-surface: var(--shell-flow-block-surface);
    --workspace-panel-surface-strong: var(--shell-flow-block-surface);
    --workspace-panel-radius: 12px;
    --workspace-accent-block-border-color: var(--border-contrast);
    --workspace-accent-block-surface: var(--shell-flow-block-surface);
    --workspace-accent-block-shadow: none;
    --workspace-commit-tree-surface: rgba(150, 150, 150, 0.11);
    --workspace-panel-shadow: none;
    --workspace-scrollbar-thumb: rgba(31, 23, 32, 0.16);
    --workspace-scrollbar-thumb-hover: rgba(31, 23, 32, 0.24);
    --workspace-terminal-border: rgba(37, 37, 37, 0.25);
    --workspace-terminal-surface-top: rgba(249, 245, 238, 0.96);
    --workspace-terminal-surface-bottom: rgba(240, 234, 225, 0.9);
    --workspace-terminal-chrome: rgba(255, 255, 255, 0.34);
    --workspace-terminal-form: rgba(255, 255, 255, 0.46);
    --workspace-terminal-editor-border: var(--border);
    --workspace-terminal-editor-surface: rgba(255, 255, 255, 0.68);
    --workspace-terminal-editor-shadow: rgba(37, 37, 37, 0.25);
    --workspace-terminal-ink: #2f1f13;
    --workspace-terminal-ink-soft: rgba(0, 0, 0, 0.87);
    --workspace-terminal-ink-muted: rgba(47, 31, 19, 0.52);
    --workspace-terminal-badge: rgba(47, 31, 19, 0.62);
    --workspace-terminal-prompt: var(--accent-cool);
    --workspace-terminal-prompt-input: var(--accent-cool);
    --workspace-terminal-command: #1f1720;
    --workspace-terminal-stdout: #2f1f13;
    --workspace-terminal-stderr: #9c5649;
    --workspace-terminal-pending: #a56a15;
    --workspace-terminal-accent: #7a5a2f;
    --workspace-terminal-success: var(--status-success-strong);
    --workspace-terminal-error: #9c5649;
    --workspace-terminal-chip-surface: rgba(255, 255, 255, 0.58);
    --workspace-terminal-chip-border: rgba(31, 23, 32, 0.1);
    --workspace-terminal-chip-ink: rgba(47, 31, 19, 0.8);
    --workspace-terminal-chip-path-surface: rgba(250, 246, 240, 0.86);
    --workspace-terminal-chip-branch-surface: rgba(215, 180, 149, 0.28);
    --workspace-terminal-chip-status-surface: rgba(104, 124, 112, 0.18);
    --workspace-terminal-action-border: var(--border);
    --workspace-terminal-action-surface: rgba(255, 255, 255, 0.42);
    --workspace-terminal-action-submit: rgba(57, 89, 121, 0.12);
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(var(--practice-viewer-height), auto) auto;
    gap: 0;
    overflow: visible;
}

.practice-pane {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.practice-pane--viewer {
    display: flex;
    height: 100%;
    min-height: var(--practice-viewer-height);
    max-height: var(--practice-viewer-height);
    padding: 0 0 18px;
}

.practice-pane--viewer .workspace-card--viewer {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.practice-pane--viewer .practice-shell__viewer-body--plain {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.practice-pane--viewer > [data-render-surface="practice-viewer"],
.practice-pane--surface > [data-render-surface="practice-surface"] {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.practice-pane--surface {
    display: flex;
    height: auto;
    min-height: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(31, 23, 32, 0.14);
    background: transparent;
}

.practice-pane--surface .workspace-card--composer {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.practice-loading-fill {
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--paper);
}

.practice-pane--surface > [data-render-surface="practice-surface"] > .practice-loading-fill {
    height: calc(100% + 18px);
    margin-top: -18px;
}

.workspace-terminal[data-workspace-command-active-tag="status"] {
    --workspace-command-active-accent: var(--tag-color-status);
    --workspace-panel-accent: var(--tag-color-status);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="status"] {
    --workspace-panel-accent: var(--tag-color-status);
}

.practice-stack[data-workspace-active-tag="status"] {
    --workspace-panel-accent: var(--tag-color-status);
}

.workspace-terminal[data-workspace-command-active-tag="working-tree"] {
    --workspace-command-active-accent: var(--tag-color-working-tree);
    --workspace-panel-accent: var(--tag-color-working-tree);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="working-tree"] {
    --workspace-panel-accent: var(--tag-color-working-tree);
}

.practice-stack[data-workspace-active-tag="working-tree"] {
    --workspace-panel-accent: var(--tag-color-working-tree);
}

.workspace-terminal[data-workspace-command-active-tag="basics"] {
    --workspace-command-active-accent: var(--tag-color-basics);
    --workspace-panel-accent: var(--tag-color-basics);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="basics"] {
    --workspace-panel-accent: var(--tag-color-basics);
}

.practice-stack[data-workspace-active-tag="basics"] {
    --workspace-panel-accent: var(--tag-color-basics);
}

.workspace-terminal[data-workspace-command-active-tag="branching"] {
    --workspace-command-active-accent: var(--tag-color-branching);
    --workspace-panel-accent: var(--tag-color-branching);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="branching"] {
    --workspace-panel-accent: var(--tag-color-branching);
}

.practice-stack[data-workspace-active-tag="branching"] {
    --workspace-panel-accent: var(--tag-color-branching);
}

.workspace-terminal[data-workspace-command-active-tag="navigation"] {
    --workspace-command-active-accent: var(--tag-color-navigation);
    --workspace-panel-accent: var(--tag-color-navigation);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="navigation"] {
    --workspace-panel-accent: var(--tag-color-navigation);
}

.practice-stack[data-workspace-active-tag="navigation"] {
    --workspace-panel-accent: var(--tag-color-navigation);
}

.workspace-terminal[data-workspace-command-active-tag="history"] {
    --workspace-command-active-accent: var(--tag-color-history);
    --workspace-panel-accent: var(--tag-color-history);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="history"] {
    --workspace-panel-accent: var(--tag-color-history);
}

.practice-stack[data-workspace-active-tag="history"] {
    --workspace-panel-accent: var(--tag-color-history);
}

.workspace-terminal[data-workspace-command-active-tag="cleanup"] {
    --workspace-command-active-accent: var(--tag-color-cleanup);
    --workspace-panel-accent: var(--tag-color-cleanup);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="cleanup"] {
    --workspace-panel-accent: var(--tag-color-cleanup);
}

.practice-stack[data-workspace-active-tag="cleanup"] {
    --workspace-panel-accent: var(--tag-color-cleanup);
}

.workspace-terminal[data-workspace-command-active-tag="planning"] {
    --workspace-command-active-accent: var(--tag-color-planning);
    --workspace-panel-accent: var(--tag-color-planning);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="planning"] {
    --workspace-panel-accent: var(--tag-color-planning);
}

.practice-stack[data-workspace-active-tag="planning"] {
    --workspace-panel-accent: var(--tag-color-planning);
}

.workspace-terminal[data-workspace-command-active-tag="remote"] {
    --workspace-command-active-accent: var(--tag-color-remote);
    --workspace-panel-accent: var(--tag-color-remote);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="remote"] {
    --workspace-panel-accent: var(--tag-color-remote);
}

.practice-stack[data-workspace-active-tag="remote"] {
    --workspace-panel-accent: var(--tag-color-remote);
}

.workspace-terminal[data-workspace-command-active-tag="inspection"] {
    --workspace-command-active-accent: var(--tag-color-inspection);
    --workspace-panel-accent: var(--tag-color-inspection);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="inspection"] {
    --workspace-panel-accent: var(--tag-color-inspection);
}

.practice-stack[data-workspace-active-tag="inspection"] {
    --workspace-panel-accent: var(--tag-color-inspection);
}

.workspace-terminal[data-workspace-command-active-tag="safety"] {
    --workspace-command-active-accent: var(--tag-color-safety);
    --workspace-panel-accent: var(--tag-color-safety);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="safety"] {
    --workspace-panel-accent: var(--tag-color-safety);
}

.practice-stack[data-workspace-active-tag="safety"] {
    --workspace-panel-accent: var(--tag-color-safety);
}

.workspace-terminal[data-workspace-command-active-tag="stash"] {
    --workspace-command-active-accent: var(--tag-color-stash);
    --workspace-panel-accent: var(--tag-color-stash);
}

.repository-workspace--plain[data-workspace-viewer-active-tag="stash"] {
    --workspace-panel-accent: var(--tag-color-stash);
}

.practice-stack[data-workspace-active-tag="stash"] {
    --workspace-panel-accent: var(--tag-color-stash);
}

.practice-stack[data-workspace-active-tag] {
    --workspace-accent-block-border-color: color-mix(in srgb, var(--workspace-panel-accent) 72%, transparent);
    --workspace-accent-block-surface: color-mix(in srgb, var(--workspace-panel-accent) 20%, transparent);
    --workspace-accent-block-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--workspace-panel-accent) 36%, transparent),
        0 8px 18px color-mix(in srgb, var(--workspace-panel-accent) 12%, transparent);
    --workspace-commit-tree-surface: color-mix(in srgb, var(--workspace-panel-accent) 4%, rgba(255, 253, 249, 0.96));
    --workspace-scrollbar-thumb: color-mix(in srgb, var(--workspace-panel-accent) 26%, rgba(31, 23, 32, 0.28));
    --workspace-scrollbar-thumb-hover: color-mix(in srgb, var(--workspace-panel-accent) 38%, rgba(31, 23, 32, 0.34));
    --workspace-terminal-border: color-mix(in srgb, var(--workspace-panel-accent) 24%, rgba(31, 23, 32, 0.16));
    --workspace-terminal-surface-top: color-mix(in srgb, var(--workspace-panel-accent) 8%, rgba(249, 245, 238, 0.98));
    --workspace-terminal-surface-bottom: color-mix(in srgb, var(--workspace-panel-accent) 12%, rgba(240, 234, 225, 0.92));
    --workspace-terminal-chrome: color-mix(in srgb, var(--workspace-panel-accent) 10%, rgba(255, 255, 255, 0.34));
    --workspace-terminal-form: color-mix(in srgb, var(--workspace-panel-accent) 10%, rgba(255, 255, 255, 0.46));
    --workspace-terminal-editor-border: color-mix(in srgb, var(--workspace-panel-accent) 24%, var(--border));
    --workspace-terminal-editor-surface: color-mix(in srgb, var(--workspace-panel-accent) 8%, rgba(255, 255, 255, 0.72));
    --workspace-terminal-editor-shadow: color-mix(in srgb, var(--workspace-panel-accent) 14%, rgba(57, 89, 121, 0.06));
    --workspace-terminal-badge: color-mix(in srgb, var(--workspace-panel-accent) 48%, rgba(47, 31, 19, 0.62));
    --workspace-terminal-prompt: color-mix(in srgb, var(--workspace-panel-accent) 58%, var(--accent-cool) 42%);
    --workspace-terminal-prompt-input: color-mix(in srgb, var(--workspace-panel-accent) 58%, var(--accent-cool) 42%);
    --workspace-terminal-stdout: color-mix(in srgb, var(--workspace-panel-accent) 22%, #2f1f13 78%);
    --workspace-terminal-chip-surface: color-mix(in srgb, var(--workspace-panel-accent) 8%, rgba(255, 255, 255, 0.6));
    --workspace-terminal-chip-border: color-mix(in srgb, var(--workspace-panel-accent) 18%, rgba(31, 23, 32, 0.1));
    --workspace-terminal-chip-path-surface: color-mix(in srgb, var(--workspace-panel-accent) 10%, rgba(250, 246, 240, 0.86));
    --workspace-terminal-chip-branch-surface: color-mix(in srgb, var(--workspace-panel-accent) 20%, rgba(215, 180, 149, 0.28));
    --workspace-terminal-chip-status-surface: color-mix(in srgb, var(--workspace-panel-accent) 16%, rgba(104, 124, 112, 0.18));
    --workspace-terminal-action-border: color-mix(in srgb, var(--workspace-panel-accent) 18%, var(--border));
    --workspace-terminal-action-surface: color-mix(in srgb, var(--workspace-panel-accent) 8%, rgba(255, 255, 255, 0.42));
    --workspace-terminal-action-submit: color-mix(in srgb, var(--workspace-panel-accent) 16%, rgba(57, 89, 121, 0.12));
}

.repository-workspace--plain[data-workspace-viewer-active-tag],
.workspace-terminal--plain[data-workspace-command-active-tag] {
    --workspace-accent-block-border-color: color-mix(in srgb, var(--workspace-panel-accent) 72%, transparent);
    --workspace-accent-block-surface: color-mix(in srgb, var(--workspace-panel-accent) 10%, var(--paper));
    --workspace-accent-block-shadow: none;
}

.practice-pane .workspace-card__header {
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-panel-border-color) 55%, transparent);
}

.workspace-card,
.workspace-card__header,
.practice-composer__form,
.practice-editor,
.practice-inline-note,
.practice-request,
.branch-graph,
.branch-graph__row,
.branch-graph__label,
.practice-output__header {
    display: grid;
    gap: 12px;
}

.workspace-card {
    min-height: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--workspace-panel-border-color);
    border-radius: var(--workspace-panel-radius);
    background: var(--workspace-panel-surface);
    box-shadow: var(--workspace-panel-shadow);
}

.workspace-card--focus {
    background: var(--workspace-panel-surface);
}

.workspace-card--viewer {
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
}

.workspace-card--composer {
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
}

.workspace-card--error {
    background: transparent;
}

.workspace-card__header {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.workspace-card__badge {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    padding: 0;
    background: transparent;
    color: var(--ink-soft);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.practice-shell__viewer-body,
.practice-composer__primary,
.practice-composer__scroll,
.practice-context-details {
    display: grid;
    gap: 12px;
}

.practice-shell__viewer-body {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
}

.practice-shell__viewer-body--plain {
    padding: 0;
}

.practice-composer.workspace-card--composer {
    grid-template-rows: auto minmax(0, 1fr);
}

.practice-composer__primary {
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-panel-border-color) 55%, transparent);
}

.practice-repository-viewer {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.practice-repository-viewer::-webkit-scrollbar {
    width: 10px;
}

.practice-repository-viewer::-webkit-scrollbar-track {
    background: transparent;
}

.practice-repository-viewer::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background: var(--workspace-scrollbar-thumb);
}

.practice-repository-viewer::-webkit-scrollbar-thumb:hover {
    background: var(--workspace-scrollbar-thumb-hover);
}

.repository-workspace,
.practice-composer__scroll {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--workspace-scrollbar-thumb) transparent;
    scrollbar-gutter: stable;
}

.practice-composer__scroll--surface {
    height: auto;
    min-height: auto;
    align-content: start;
    padding-right: 2px;
    overflow: visible;
}

.practice-composer__spoiler {
    display: grid;
    gap: 0;
    min-height: 0;
}

.practice-composer__spoiler-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-panel-border-color) 55%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--ink-strong);
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
}

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

.practice-composer__spoiler-summary::after {
    content: "+";
    flex: none;
    color: var(--ink-soft);
    font-family: "Courier New", Courier, monospace;
    font-size: 1rem;
    line-height: 1;
}

.practice-composer__spoiler[open] .practice-composer__spoiler-summary::after {
    content: "-";
}

.practice-composer__spoiler-body {
    min-height: 0;
    padding-top: 12px;
}

.repository-workspace::-webkit-scrollbar,
.practice-pane--surface .workspace-card--composer::-webkit-scrollbar,
.practice-composer__scroll::-webkit-scrollbar {
    width: 10px;
}

.repository-workspace::-webkit-scrollbar-track,
.practice-pane--surface .workspace-card--composer::-webkit-scrollbar-track,
.practice-composer__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.repository-workspace::-webkit-scrollbar-thumb,
.practice-pane--surface .workspace-card--composer::-webkit-scrollbar-thumb,
.practice-composer__scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background: var(--workspace-scrollbar-thumb);
}

.repository-workspace::-webkit-scrollbar-thumb:hover,
.practice-pane--surface .workspace-card--composer::-webkit-scrollbar-thumb:hover,
.practice-composer__scroll::-webkit-scrollbar-thumb:hover {
    background: var(--workspace-scrollbar-thumb-hover);
}

.practice-shell__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.practice-shell__meta--viewer {
    gap: 8px;
}

.practice-shell__meta--compact {
    justify-content: flex-start;
}

.practice-shell__chip {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.practice-inline-note {
    gap: 8px;
}

.practice-inline-note--viewer {
    gap: 4px;
    padding: 0 2px;
}

.practice-summary {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.practice-summary__header,
.practice-summary__heading {
    display: grid;
    gap: 8px;
}

.practice-summary__title {
    margin: 0;
    font-size: 0.96rem;
}

.practice-summary__lead {
    line-height: 1.4;
}

.practice-editor {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 0 16px;
}

.practice-editor__prompt,
.practice-action {
    font-family: "Courier New", Courier, monospace;
}

.practice-editor__prompt {
    padding-top: 2px;
    color: var(--ink-soft);
}

.practice-editor textarea {
    width: 100%;
    min-height: 88px;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    color: var(--ink-strong);
    font: inherit;
    font-family: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.55;
    resize: none;
    outline: none;
}

.practice-editor textarea:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.practice-composer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 0 16px;
}

.practice-action {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.practice-action:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.practice-action--primary {
    color: var(--accent);
    font-weight: 700;
}

.practice-output {
    display: grid;
    gap: 8px;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
}

.practice-output__header {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.practice-output__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.practice-composer__controls,
.practice-feedback,
.practice-feedback__summary,
.practice-feedback__meta {
    display: grid;
    gap: 8px;
}

.practice-composer__controls {
    padding: 0 16px;
}

.practice-select {
    display: grid;
    gap: 8px;
}

.practice-select select {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-strong);
    padding: 9px 0;
    font: inherit;
}

.practice-output--ready {
    color: var(--ink-strong);
}

.practice-output--correct {
    color: var(--status-success-ink);
    background: linear-gradient(180deg, rgba(87, 146, 113, 0.12), rgba(255, 250, 241, 0.82));
}

.practice-output--incorrect {
    color: var(--status-error-ink);
    background: linear-gradient(180deg, rgba(183, 88, 94, 0.12), rgba(255, 250, 241, 0.82));
}

.practice-output--unsupported {
    color: var(--status-warning-ink);
    background: linear-gradient(180deg, rgba(215, 153, 88, 0.14), rgba(255, 250, 241, 0.82));
}

.practice-output--pending,
.practice-request--pending {
    color: var(--ink-strong);
}

.practice-output--retryable,
.practice-request--retryable {
    color: var(--status-warning-ink);
}

.practice-output--terminal,
.practice-request--terminal {
    color: var(--status-error-ink);
}

.practice-request {
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.practice-feedback__title {
    margin: 0;
    font-size: 0.94rem;
}

.practice-feedback__meta {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.practice-feedback__details {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.practice-feedback__details[open] {
    background: transparent;
}

.practice-feedback__details-summary {
    cursor: pointer;
    list-style: none;
    padding: 10px 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

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

.practice-feedback__details-body {
    display: grid;
    gap: 8px;
    padding: 0 0 12px;
}

.practice-feedback__detail-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: inherit;
}

.practice-feedback__reveal-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.practice-feedback__reveal {
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.practice-feedback__pill {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.practice-inline-note--warning {
    border-color: rgba(138, 75, 17, 0.22);
    background: rgba(255, 239, 214, 0.72);
}

.repository-workspace,
.workspace-console,
.workspace-console__chrome,
.workspace-console__body,
.workspace-console__line,
.workspace-terminal,
.workspace-terminal__chrome,
.workspace-terminal__body,
.workspace-terminal__history,
.workspace-terminal__entry,
.workspace-terminal__line,
.workspace-terminal__form,
.workspace-terminal__editor,
.workspace-activity,
.workspace-activity__header,
.workspace-activity__heading,
.workspace-activity__body,
.workspace-activity__timeline,
.workspace-activity__item,
.workspace-activity__track,
.workspace-activity__copy,
.repository-workspace__hero,
.repository-workspace__hero-copy,
.repository-workspace__hero-meta,
.repository-workspace__grid,
.repository-workspace__section,
.repository-workspace__section-header,
.repository-workspace__notes,
.workspace-commit-tree,
.workspace-commit-tree__rows,
.workspace-commit-tree__row,
.workspace-commit-tree__content,
.workspace-commit-tree__header,
.workspace-commit-tree__refs,
.workspace-file-stack,
.workspace-file-stack__item,
.workspace-file-stack__body,
.workspace-file-stack__header,
.workspace-annotation-rail,
.workspace-annotation-rail__item {
    display: grid;
    gap: 10px;
}

.repository-workspace {
    padding: 2px 2px 14px;
    gap: 14px;
}

.repository-workspace--plain {
    padding: 12px 14px 10px;
    gap: 0;
    border: 1px solid var(--workspace-accent-block-border-color);
    border-radius: var(--workspace-panel-radius);
    background-color: var(--workspace-accent-block-surface);
    box-shadow: var(--workspace-accent-block-shadow);
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 180ms ease;
}

.workspace-console,
.workspace-terminal {
    gap: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--workspace-terminal-ink);
    overflow: hidden;
}

.workspace-terminal--plain {
    border: 1px solid var(--workspace-accent-block-border-color);
    border-radius: var(--workspace-panel-radius);
    background-color: var(--workspace-accent-block-surface);
    box-shadow: var(--workspace-accent-block-shadow);
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 180ms ease;
}

.workspace-terminal__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 0;
    padding: 5px 12px 5px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-terminal-border) 100%, var(--border));
    background-color: var(--workspace-accent-block-surface);
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.workspace-terminal__title {
    display: block;
    color: var(--workspace-terminal-ink-soft);
    font-family: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    max-width: 100%;
}

.workspace-console__chrome,
.workspace-terminal__chrome {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--workspace-terminal-border) 72%, transparent);
    background: var(--workspace-terminal-chrome);
}

.workspace-console__traffic {
    display: none;
}

.workspace-console__tab,
.workspace-console__badge,
.workspace-console__prompt,
.workspace-console__command,
.workspace-terminal__tab,
.workspace-terminal__badge,
.workspace-terminal__prompt,
.workspace-terminal__command,
.workspace-terminal__entry-badge,
.workspace-terminal__input {
    font-family: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.workspace-console__tab,
.workspace-console__badge,
.workspace-terminal__tab,
.workspace-terminal__badge,
.workspace-terminal__entry-badge {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workspace-console__tab,
.workspace-terminal__tab {
    color: var(--workspace-terminal-ink-soft);
    font-weight: 600;
}

.workspace-console__badge,
.workspace-terminal__badge {
    color: var(--workspace-terminal-badge);
    justify-self: end;
}

.workspace-console__body,
.workspace-terminal__body {
    gap: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    padding: 0;
}

.workspace-terminal--plain .workspace-terminal__history {
    padding: 8px 14px 12px;
}

.workspace-terminal--plain .workspace-terminal__form {
    border-top: 1px solid color-mix(in srgb, var(--workspace-terminal-border) 72%, transparent);
}

.workspace-terminal__history {
    align-content: start;
    gap: 4px;
    min-height: 0;
    padding: 6px 14px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--workspace-terminal-action-border) transparent;
}

.workspace-terminal__history::-webkit-scrollbar {
    width: 10px;
}

.workspace-terminal__history::-webkit-scrollbar-track {
    background: transparent;
}

.workspace-terminal__history::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background: var(--workspace-terminal-action-border);
}

.workspace-terminal__history::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--workspace-terminal-action-border) 84%, white 16%);
}

.workspace-terminal__output,
.workspace-terminal__entry {
    margin: 0;
    padding: 0;
}

.workspace-terminal__entry {
    gap: 4px;
}

.workspace-console__line,
.workspace-terminal__line {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.workspace-console__prompt,
.workspace-terminal__prompt {
    color: var(--workspace-terminal-prompt);
    font-size: 0.78rem;
    font-weight: 700;
}

.workspace-console__command,
.workspace-terminal__command {
    color: var(--workspace-terminal-command);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.workspace-terminal[data-workspace-command-active-tag] .workspace-terminal__command,
.workspace-terminal[data-workspace-command-active-tag] .workspace-terminal__input {
    color: var(--workspace-command-active-text-color);
}

.workspace-terminal[data-workspace-command-active-tag] .workspace-terminal__prompt--input {
    color: var(--workspace-command-active-accent);
}

.workspace-terminal__output {
    color: var(--workspace-terminal-stdout);
    line-height: 1.5;
}

.workspace-terminal__stream {
    margin: 0;
    padding: 0;
    color: var(--workspace-terminal-stdout);
    font-family: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.workspace-terminal__stream--stdout {
    color: var(--workspace-terminal-stdout);
}

.workspace-terminal__stream--stderr {
    color: var(--workspace-terminal-stderr);
}

.workspace-terminal__output--system,
.workspace-terminal__summary--system {
    color: color-mix(in srgb, var(--workspace-terminal-prompt) 38%, var(--workspace-terminal-ink) 62%);
}

.workspace-terminal__output--muted,
.workspace-terminal__summary--muted {
    color: var(--workspace-terminal-ink-muted);
}

.workspace-console__summary,
.workspace-terminal__summary {
    color: var(--workspace-terminal-ink-soft);
    margin: 0;
    padding-left: 0;
    line-height: 1.5;
}

.workspace-terminal__output--pending,
.workspace-terminal__summary--pending {
    color: var(--workspace-terminal-pending);
}

.workspace-terminal__output--accent,
.workspace-terminal__summary--accent {
    color: var(--workspace-terminal-accent);
}

.workspace-terminal__output--correct,
.workspace-terminal__summary--correct {
    color: var(--workspace-terminal-success);
}

.workspace-terminal__output--error,
.workspace-terminal__summary--error {
    color: var(--workspace-terminal-error);
}

.workspace-terminal__form {
    display: block;
    gap: 0;
    padding: 0;
    border-top: 1px solid color-mix(in srgb, var(--workspace-terminal-border) 100%, var(--border));
    background: transparent;
}

.workspace-terminal__editor {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
}

.workspace-terminal__chip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 132px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--workspace-terminal-chip-border);
    background: var(--workspace-terminal-chip-surface);
    color: var(--workspace-terminal-chip-ink);
    font-family: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.68rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-terminal__chip--path {
    background: var(--workspace-terminal-chip-path-surface);
}

.workspace-terminal__chip--branch {
    background: var(--workspace-terminal-chip-branch-surface);
    border-color: transparent;
}

.workspace-terminal__chip--status {
    background: var(--workspace-terminal-chip-status-surface);
    border-color: transparent;
}

.workspace-terminal__prompt--input {
    flex: 0 0 auto;
    color: var(--workspace-terminal-prompt-input);
    padding-top: 0;
}

.workspace-terminal__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 1.3em;
    max-height: 1.3em;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--workspace-terminal-stdout);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.3;
    resize: none;
    outline: none;
    overflow: hidden;
    white-space: nowrap;
}

.workspace-terminal__input::placeholder {
    color: var(--workspace-terminal-prompt-input);
    font-weight: 400;
}

.workspace-terminal[data-workspace-command-active-tag] .workspace-terminal__input::placeholder {
    color: var(--workspace-command-active-accent);
}

.workspace-terminal__input:focus::placeholder {
    color: transparent;
}

.workspace-terminal__input:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.workspace-terminal__action {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--workspace-terminal-action-border);
    border-radius: 10px;
    background: var(--workspace-terminal-action-surface);
    color: var(--workspace-terminal-stdout);
    font-family: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.workspace-terminal__action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.workspace-terminal__action--submit {
    background: var(--workspace-terminal-action-submit);
}

.workspace-console__cursor,
.workspace-terminal__cursor {
    width: 7px;
    height: 1.05em;
    background: color-mix(in srgb, var(--workspace-terminal-prompt) 80%, transparent);
    animation: workspace-console-cursor 1s steps(1, end) infinite;
}

@keyframes workspace-console-cursor {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

.repository-workspace--running .repository-workspace__section,
.repository-workspace--running .repository-workspace__notes,
.repository-workspace--booting .repository-workspace__section,
.repository-workspace--booting .repository-workspace__notes {
    position: relative;
    overflow: hidden;
}

.repository-workspace--running .repository-workspace__section::after,
.repository-workspace--running .repository-workspace__notes::after,
.repository-workspace--booting .repository-workspace__section::after,
.repository-workspace--booting .repository-workspace__notes::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 48%, transparent 100%);
    transform: translateX(-100%);
    animation: workspace-scan-sheen 1.35s linear infinite;
    pointer-events: none;
}

@keyframes workspace-scan-sheen {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

.repository-workspace__hero {
    gap: 12px;
    padding: 14px 16px;
    border: var(--surface-card-border);
    border-radius: var(--surface-card-radius);
    background:
        radial-gradient(circle at top right, rgba(190, 91, 43, 0.1), transparent 42%),
        linear-gradient(180deg, var(--paper-elevated), rgba(247, 240, 231, 0.74));
}

.repository-workspace__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.repository-workspace__hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.repository-workspace__chip {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    color: var(--ink-soft);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.67rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.repository-workspace__grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
    align-items: start;
    gap: 12px;
}

.repository-workspace__grid--details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.repository-workspace__section,
.repository-workspace__notes {
    min-height: 100%;
    padding: 14px 16px;
    border: var(--surface-card-border);
    border-radius: var(--surface-card-radius);
    background: rgba(255, 252, 246, 0.78);
}

.repository-workspace__section-header {
    grid-template-columns: 1fr auto;
    align-items: start;
}

.repository-workspace__section--graph {
    grid-row: span 2;
}

.repository-workspace__section--graph-only {
    grid-row: auto;
}

.workspace-commit-tree {
    grid-template-columns: var(--commit-tree-graph-width, 28px) minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    padding: 0 0 2px;
    border-left: 0;
    background: transparent;
}

.workspace-commit-tree__graph {
    position: relative;
    width: var(--commit-tree-graph-width, 28px);
    min-height: var(--commit-tree-tree-height, 0);
}

.workspace-commit-tree__svg {
    display: block;
    width: 100%;
    height: var(--commit-tree-tree-height, 0);
    overflow: visible;
}

.workspace-commit-tree__rows {
    grid-auto-rows: var(--commit-tree-row-height, 40px);
    gap: 0;
}

.workspace-commit-tree__row {
    height: var(--commit-tree-row-height, 40px);
    align-items: center;
    padding: 0;
    border-top: 0;
    border-radius: 8px;
}

.workspace-commit-tree__row--current {
    background: rgba(245, 188, 122, 0.12);
}

.workspace-commit-tree__row--new {
    background: rgba(94, 144, 212, 0.1);
}

.workspace-commit-tree__row--active {
    background: rgba(111, 85, 173, 0.1);
}

.workspace-commit-tree__content {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: 0;
    padding: 5px 10px 5px 0;
    background: transparent;
}

.workspace-commit-tree__hash {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--ink-soft);
}

.workspace-commit-tree__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    text-align: right;
}

.workspace-commit-tree__summary {
    color: var(--ink-strong);
    display: block;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.3;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-commit-tree__refs {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
    justify-content: flex-end;
    white-space: nowrap;
}

.workspace-commit-tree__ref {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: auto;
    padding: 1px 6px;
    border: var(--surface-pill-border);
    border-radius: var(--surface-compact-radius);
    background: rgba(64, 73, 83, 0.06);
    color: var(--ink-soft);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.59rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workspace-commit-tree__ref--current {
    border-color: rgba(190, 91, 43, 0.22);
    background: rgba(190, 91, 43, 0.12);
    color: var(--ink-strong);
}

.workspace-commit-tree__ref--head {
    background: rgba(64, 73, 83, 0.16);
}

.workspace-commit-tree__ref--branch {
    background: rgba(215, 180, 149, 0.34);
}

.workspace-commit-tree__ref--remote {
    background: rgba(104, 124, 112, 0.18);
}

.workspace-commit-tree__ref--tag {
    background: rgba(138, 75, 17, 0.16);
}

.workspace-commit-tree__ref--stash {
    background: rgba(122, 47, 53, 0.16);
}

.workspace-commit-tree__path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.workspace-commit-tree__node {
    stroke: rgba(255, 251, 245, 0.96);
    stroke-width: 1.4;
}

.workspace-commit-tree__node--current {
    stroke: rgba(255, 243, 224, 1);
    stroke-width: 2;
}

.workspace-commit-tree__node--new {
    stroke: rgba(225, 239, 255, 1);
    stroke-width: 2;
}

.workspace-commit-tree__node--active {
    stroke: rgba(241, 232, 255, 1);
    stroke-width: 2.2;
}

.workspace-file-stack__header {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px;
}

.workspace-file-stack__item {
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid var(--border-subtle);
}

.workspace-file-stack__item:first-child {
    padding-top: 0;
    border-top: 0;
}

.workspace-file-stack__marker {
    width: 10px;
    min-height: 56px;
    border-radius: var(--surface-pill-radius);
    background: rgba(57, 89, 121, 0.18);
}

.workspace-file-stack__marker--modified {
    background: linear-gradient(180deg, rgba(138, 75, 17, 0.9), rgba(138, 75, 17, 0.22));
}

.workspace-file-stack__marker--untracked {
    background: linear-gradient(180deg, rgba(190, 91, 43, 0.92), rgba(190, 91, 43, 0.2));
}

.workspace-file-stack__marker--staged {
    background: linear-gradient(180deg, rgba(36, 87, 61, 0.9), rgba(36, 87, 61, 0.2));
}

.workspace-file-stack__marker--deleted,
.workspace-file-stack__marker--conflicted {
    background: linear-gradient(180deg, rgba(122, 47, 53, 0.9), rgba(122, 47, 53, 0.2));
}

.workspace-file-stack__marker--renamed {
    background: linear-gradient(180deg, rgba(57, 89, 121, 0.9), rgba(57, 89, 121, 0.2));
}

.workspace-annotation-rail {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.workspace-annotation-rail__item {
    padding: 12px 14px;
    border-radius: var(--surface-panel-radius);
    background: rgba(247, 240, 231, 0.82);
}

.workspace-activity {
    padding: 14px 16px;
    border: var(--surface-card-border);
    border-radius: var(--surface-card-radius);
    background: rgba(255, 252, 246, 0.72);
}

.workspace-activity__header {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;
}

.workspace-activity__title {
    margin: 0;
    font-size: 0.94rem;
}

.workspace-activity__timeline {
    gap: 12px;
}

.workspace-activity__item {
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
}

.workspace-activity__track {
    justify-items: center;
    gap: 0;
}

.workspace-activity__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(190, 91, 43, 0.12);
}

.workspace-activity__line {
    width: 2px;
    min-height: 28px;
    height: 100%;
    background: linear-gradient(180deg, rgba(190, 91, 43, 0.28), rgba(190, 91, 43, 0.08));
}

.workspace-activity__line--last {
    background: transparent;
}

.workspace-activity__copy {
    gap: 6px;
}

.repository-context,
.repository-context__section,
.repository-context__section-header,
.repository-file-list,
.repository-file-card,
.repository-file-card__header,
.repository-commit-list,
.repository-commit-card,
.repository-commit-card__header,
.repository-annotation-list,
.repository-annotation-card,
.repository-context__empty {
    display: grid;
    gap: 10px;
}

.repository-context {
    padding: 4px 0 10px;
}

.repository-context__section {
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
}

.repository-context__section:first-child {
    padding-top: 0;
    border-top: 0;
}

.repository-context__section-header,
.repository-file-card__header,
.repository-commit-card__header {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 8px;
}

.repository-file-list,
.repository-commit-list,
.repository-annotation-list {
    gap: 12px;
}

.repository-file-card,
.repository-commit-card,
.repository-annotation-card,
.repository-context__empty {
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.repository-file-card strong,
.repository-commit-card strong {
    font-size: 0.84rem;
    line-height: 1.4;
}

.repository-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.repository-status-pill--modified {
    color: var(--status-warning-ink);
}

.repository-status-pill--untracked {
    color: var(--accent);
}

.repository-status-pill--staged {
    color: var(--status-success-ink);
}

.branch-graph {
    min-height: 0;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    align-content: start;
}

.branch-graph--placeholder,
.branch-graph--empty {
    align-items: center;
}

.branch-graph__row {
    grid-template-columns: 14px 18px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
}

.branch-graph__row--current .branch-graph__label strong {
    color: var(--accent);
}

.branch-graph__node {
    width: 8px;
    height: 8px;
    border-radius: var(--surface-pill-radius);
    background: var(--accent-cool);
    box-shadow: 0 0 0 3px rgba(57, 89, 121, 0.08);
}

.branch-graph__row--current .branch-graph__node {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(190, 91, 43, 0.12);
}

.branch-graph__track {
    width: 2px;
    height: 34px;
    margin: -10px auto;
    background: linear-gradient(180deg, rgba(57, 89, 121, 0.28), rgba(57, 89, 121, 0.08));
}

.branch-graph__track--last {
    background: transparent;
}

.branch-graph__label strong,
.branch-graph__label span {
    display: block;
}

.branch-graph__label span {
    color: var(--ink-soft);
    font-size: 0.76rem;
}

.branch-graph__empty {
    display: grid;
    gap: 8px;
}

.viewer-status-strip,
.viewer-status-strip__header,
.viewer-status-strip__meta {
    display: grid;
    gap: 8px;
}

.viewer-status-strip {
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.viewer-status-strip__header {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.viewer-status-strip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.viewer-status-strip__item {
    display: inline-flex;
    align-items: center;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font-family: "Courier New", Courier, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.viewer-status-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.viewer-status-strip--retryable {
    color: var(--status-warning-ink);
}

.viewer-status-strip--terminal {
    color: var(--status-error-ink);
}

.viewer-status-strip--pending,
.viewer-status-strip--idle,
.viewer-status-strip--ready {
    color: var(--ink-strong);
}

.lesson-lane--practice .lesson-lane__body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0;
    padding-bottom: 0;
}

.lesson-lane--practice .lesson-lane__scroll-content {
    height: auto;
    min-height: 100%;
}

@media (max-width: 900px) {
    .repository-workspace__grid {
        grid-template-columns: 1fr;
    }

    .repository-workspace__grid--details {
        grid-template-columns: 1fr;
    }

    .repository-workspace__section--graph {
        grid-row: auto;
    }

    .lesson-lane--practice .lesson-lane__body {
        overflow: visible;
    }

    .practice-stack {
        height: auto;
        grid-template-rows: auto;
        overflow: visible;
    }

    .practice-pane--viewer,
    .practice-pane--surface {
        display: block;
        padding: 0;
    }

    .workspace-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .practice-pane--viewer {
        padding-bottom: 16px;
    }

    .practice-pane--surface {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid color-mix(in srgb, var(--workspace-panel-accent) 22%, rgba(31, 23, 32, 0.14));
    }

    .practice-editor,
    .practice-composer__actions,
    .practice-composer__controls {
        padding: 0;
    }

    .practice-composer__primary {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .practice-composer__scroll {
        overflow: visible;
    }
}

@media (max-width: 720px) {
    .workspace-console__chrome,
    .workspace-terminal__chrome {
        grid-template-columns: auto auto auto 1fr;
    }

    .workspace-console__badge,
    .workspace-terminal__badge {
        grid-column: 1 / -1;
    }

    .repository-workspace__hero,
    .repository-workspace__section,
    .repository-workspace__notes,
    .workspace-activity {
        padding: 12px 14px;
    }

    .repository-workspace__hero-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .workspace-console__line,
    .workspace-terminal__line {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .workspace-terminal__summary {
        padding-left: 0;
    }

    .workspace-terminal__stream {
        padding-left: 0;
    }

    .workspace-terminal__editor {
        align-items: stretch;
    }

    .workspace-terminal__action,
    .workspace-terminal__chip,
    .workspace-terminal__input {
        width: 100%;
    }

    .practice-shell__meta,
    .workspace-card__actions,
    .practice-composer__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .practice-summary {
        padding: 12px 14px;
    }

    .branch-graph__row {
        grid-template-columns: 14px 18px minmax(0, 1fr);
    }

    .workspace-commit-tree {
        column-gap: 8px;
    }

    .workspace-commit-tree__content,
    .workspace-commit-tree__meta,
    .workspace-file-stack__header,
    .repository-context__section-header,
    .repository-file-card__header,
    .repository-commit-card__header {
        grid-template-columns: 1fr;
    }

    .workspace-commit-tree__content {
        gap: 4px;
    }

    .workspace-commit-tree__rows {
        grid-auto-rows: auto;
    }

    .workspace-commit-tree__row {
        height: auto;
        min-height: var(--commit-tree-row-height, 40px);
    }

    .workspace-commit-tree__meta {
        display: grid;
        justify-content: start;
        text-align: left;
    }

    .workspace-commit-tree__summary {
        text-align: left;
    }

    .workspace-commit-tree__refs {
        justify-content: start;
    }
}