@import url("./site_visual_skin.css?v=20260812-fusion-exact");

.llw-workspace .llw-readiness-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--llw-accent, #2784ff) 24%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #f8fafc 92%, var(--llw-accent, #2784ff) 8%);
}

.llw-workspace[data-visual-skin="tron"] .llw-readiness-panel {
    color: #dbeafe;
    background: color-mix(in srgb, #0b1119 92%, var(--llw-accent, #2784ff) 8%);
}

.llw-workspace .llw-readiness-panel[hidden] {
    display: none;
}

.llw-workspace .llw-readiness-panel[data-readiness="available"] {
    border-color: color-mix(in srgb, #49c987 45%, transparent);
}

.llw-workspace .llw-readiness-panel[data-readiness="ready"] {
    border-color: color-mix(in srgb, #49c987 55%, transparent);
    background: color-mix(in srgb, #f8fafc 90%, #49c987 10%);
}

.llw-workspace[data-visual-skin="tron"] .llw-readiness-panel[data-readiness="ready"] {
    background: color-mix(in srgb, #0b1119 90%, #49c987 10%);
}

.llw-workspace .llw-readiness-copy,
.llw-workspace .llw-readiness-heading {
    min-width: 0;
}

.llw-workspace .llw-readiness-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.llw-workspace .llw-readiness-eyebrow {
    color: var(--llw-accent, #2784ff);
    font: 700 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .12em;
}

.llw-workspace .llw-readiness-title {
    font-size: 13px;
}

.llw-workspace .llw-readiness-detail {
    margin: 3px 0 0;
    color: var(--llw-muted, #8fa1b8);
    font-size: 12px;
    line-height: 1.35;
}

.llw-workspace .llw-lesson-candidate {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    color: var(--llw-muted, #8fa1b8);
    font-size: 11px;
}

.llw-workspace .llw-lesson-candidate[hidden] {
    display: none;
}

.llw-workspace .llw-lesson-candidate-select {
    min-width: 0;
    max-width: 360px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 6px;
    color: inherit;
    background: color-mix(in srgb, var(--llw-surface, #fff) 92%, transparent);
    font: inherit;
}

.llw-workspace[data-visual-skin="tron"] .llw-lesson-candidate-select {
    color: #dbeafe;
    background: #0b1119;
}

.llw-workspace .llw-readiness-badge {
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 999px;
    color: var(--llw-muted, #8fa1b8);
    font-size: 11px;
    white-space: nowrap;
}

.llw-workspace .llw-readiness-panel:is([data-readiness="available"], [data-readiness="ready"]) .llw-readiness-badge {
    color: #49c987;
}

.llw-workspace .llw-readiness-panel[data-lesson-timer="overtime"] .llw-readiness-badge {
    color: #d64b55;
    animation: llwLiveLessonOvertimePulse 1.35s ease-in-out infinite;
}

@keyframes llwLiveLessonOvertimePulse {
    0%, 100% {
        opacity: .72;
        transform: scale(.98);
    }
    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .llw-workspace .llw-readiness-panel[data-lesson-timer="overtime"] .llw-readiness-badge {
        animation: none;
    }
}

.llw-workspace .llw-readiness-actions {
    display: flex;
    justify-content: flex-end;
}

.llw-workspace .llw-readiness-action {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--llw-accent, #2784ff) 52%, transparent);
    border-radius: 7px;
    color: inherit;
    background: color-mix(in srgb, var(--llw-accent, #2784ff) 15%, transparent);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}

.llw-workspace .llw-readiness-action:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.llw-workspace .llw-readiness-panel[data-readiness="available"] .llw-readiness-action {
    border-color: color-mix(in srgb, #49c987 68%, transparent);
    background: color-mix(in srgb, #49c987 18%, transparent);
    color: #168052;
    font-weight: 700;
}

.llw-workspace[data-visual-skin="tron"] .llw-readiness-panel[data-readiness="available"] .llw-readiness-action {
    color: #8fffc3;
}

.llw-workspace .llw-readiness-panel[data-readiness="pending"] .llw-readiness-action:disabled {
    cursor: wait;
}

.llw-workspace .llw-readiness-action:focus-visible {
    outline: 2px solid var(--llw-accent, #2784ff);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .llw-workspace .llw-readiness-panel {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .llw-workspace .llw-readiness-actions {
        grid-column: 1 / -1;
    }
}
.llw-workspace {
    --llw-border: #d9e2ef;
    --llw-ink: #172033;
    --llw-muted: #66758d;
    box-sizing: border-box;
    display: grid;
    min-width: 0;
    max-width: 100%;
    gap: 14px;
    color: var(--llw-ink);
}

/* Stage 0.1: lightweight web-IDE shell. */
.llw-ide-main {
    --llw-project-width: 190px;
    display: grid;
    grid-template-columns: var(--llw-project-width) 6px minmax(0, 1fr);
    min-height: 430px;
    background: #111827;
}

.llw-project-panel {
    min-width: 0;
    color: #cbd5e1;
    background: #172033;
    border-right: 1px solid #334155;
}

.llw-project-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 0;
    color: #f8fafc;
    background: #202b40;
    text-align: left;
    font: 700 12px/1.2 inherit;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.llw-project-heading > span:first-child {
    margin-right: auto;
}

.llw-project-reset {
    display: inline-grid;
    width: 24px;
    height: 24px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #a5b4fc;
    background: transparent;
    font: 16px/1 sans-serif;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.llw-project-reset:not(:disabled) {
    color: #9ff7ff;
    border-color: rgb(76 228 255 / 48%);
    background: rgb(20 184 214 / 10%);
    box-shadow: inset 0 0 8px rgb(37 211 255 / 7%);
}

.llw-project-reset:hover:not(:disabled) {
    color: #fff;
    background: rgb(148 163 184 / 18%);
}

.llw-project-reset:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

.llw-project-reset:disabled {
    opacity: .3;
    cursor: default;
    box-shadow: none;
}

.llw-project-collapse {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: inherit;
    background: transparent;
    font: 20px/1 sans-serif;
    cursor: pointer;
}

.llw-project-collapse:hover {
    background: rgb(148 163 184 / 18%);
}

.llw-project-collapse:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

.llw-ide-main.is-project-collapsed {
    grid-template-columns: 30px 0 minmax(0, 1fr);
}

.llw-project-splitter {
    position: relative;
    z-index: 3;
    cursor: col-resize;
    background: #334155;
}

.llw-project-splitter::after {
    content: "";
    position: absolute;
    inset: 0 -3px;
}

.llw-project-splitter:hover {
    background: #60a5fa;
}

.llw-project-panel.is-collapsed .llw-project-heading {
    height: 100%;
    min-height: 0;
    padding: 6px 3px;
}

.llw-project-panel.is-collapsed .llw-project-heading > span,
.llw-project-panel.is-collapsed .llw-project-tree {
    display: none;
}

.llw-project-panel.is-collapsed .llw-project-collapse {
    width: 24px;
    height: 100%;
}

.llw-project-tree {
    padding: 4px 3px 6px;
    overflow: auto;
}

.llw-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 22px;
    padding: 2px 5px;
    border: 0;
    border-radius: 2px;
    color: inherit;
    background: transparent;
    text-align: left;
    font: 12px/18px ui-monospace, SFMono-Regular, Consolas, monospace;
    user-select: none;
}

.llw-tree-file,
.llw-tree-folder {
    cursor: pointer;
}

.llw-tree-file:hover,
.llw-tree-folder:hover {
    color: #f8fafc;
    background: rgb(71 85 105 / 55%);
}

.llw-tree-file.active {
    color: #fff;
    background: #334155;
    box-shadow: inset 2px 0 #60a5fa;
}

.llw-tree-row:focus-visible {
    position: relative;
    z-index: 1;
    outline: 1px solid #facc15;
    outline-offset: -1px;
}

.llw-tree-level-1 {
    padding-left: 4px;
}

.llw-tree-level-2 {
    padding-left: 18px;
}

.llw-tree-level-3 {
    padding-left: 32px;
}

.llw-tree-chevron {
    flex: 0 0 10px;
    width: 10px;
    color: #94a3b8;
    text-align: center;
    font: 10px/1 sans-serif;
}

.llw-tree-chevron.is-placeholder {
    visibility: hidden;
}

.llw-tree-icon {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.llw-tree-icon.is-folder::before {
    content: "";
    position: absolute;
    inset: 3px 0 1px;
    border: 1px solid #94a3b8;
    border-radius: 1px;
    background: #334155;
}

.llw-tree-icon.is-folder::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 7px;
    height: 4px;
    border: 1px solid #94a3b8;
    border-bottom: 0;
    border-radius: 1px 1px 0 0;
    background: #334155;
}

.llw-tree-icon.is-folder.is-open::before {
    inset: 4px 1px 1px 0;
    border-color: #67e8f9;
    background: #123c4b;
}

.llw-tree-icon.is-folder.is-open::after {
    top: 6px;
    left: 0;
    width: 13px;
    height: 7px;
    border: 1px solid #67e8f9;
    border-radius: 1px;
    background: #24566a;
    transform: skewX(-9deg);
    transform-origin: bottom left;
}

.llw-tree-icon:is(.is-python, .is-text, .is-binary, .is-warning)::before {
    content: "";
    position: absolute;
    inset: 0 2px;
    border: 1px solid #7f91aa;
    border-radius: 1px;
    background: #202b40;
}

.llw-tree-icon.is-python::after {
    content: "Py";
    position: absolute;
    inset: 1px 0 0;
    color: #7dd3fc;
    text-align: center;
    font: 700 7px/13px ui-monospace, Consolas, monospace;
}

.llw-tree-icon.is-text::after {
    content: "≡";
    position: absolute;
    inset: 0;
    color: #a5b4fc;
    text-align: center;
    font: 9px/13px sans-serif;
}

.llw-tree-icon.is-binary::after,
.llw-tree-icon.is-warning::after {
    position: absolute;
    inset: 1px 0 0;
    text-align: center;
    font: 700 7px/13px ui-monospace, Consolas, monospace;
}

.llw-tree-icon.is-binary::after {
    content: "01";
    color: #fbbf24;
}

.llw-tree-icon.is-warning::after {
    content: "!";
    color: #fb7185;
}

.llw-tree-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-tree-readonly {
    margin-left: auto;
    color: #94a3b8;
    font-size: 8px;
}

.llw-ide-editor-column {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.llw-file-tabs {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    background: #182235;
    border-bottom: 1px solid #334155;
}

.llw-file-tab {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 0;
    border-right: 1px solid #334155;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    background: transparent;
    font: 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    cursor: pointer;
}

.llw-file-tab.active {
    color: #fff;
    background: #111827;
    border-bottom-color: #60a5fa;
}

.llw-readonly-mark {
    margin-left: 7px;
    font-size: 10px;
}

.llw-ide-main .llw-editor-shell {
    height: 100%;
    min-height: 350px;
}

.llw-fullscreen-overlay {
    position: fixed;
    inset: 10px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #475569;
    border-radius: 12px;
    background: #0f172a;
    box-shadow: 0 24px 80px rgb(0 0 0 / 55%);
}

.llw-fullscreen-overlay > .llw-fullscreen-close {
    position: absolute;
    z-index: 3;
    top: 9px;
    right: 12px;
    padding: 7px 12px;
    border: 1px solid #64748b;
    border-radius: 7px;
    color: #fff;
    background: #334155;
    cursor: pointer;
}

.llw-fullscreen-overlay > .llw-code-tool {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.llw-fullscreen-overlay .llw-tool-heading {
    padding-right: 108px;
}

.llw-fullscreen-overlay .llw-ide-main {
    min-height: 0;
}

.llw-fullscreen-overlay .llw-editor-shell {
    min-height: 0;
}

body.llw-body-locked {
    position: fixed;
    width: calc(100% - var(--llw-scrollbar-compensation, 0px));
    overflow: hidden;
}

.llw-workspace.has-fullscreen-ide .llw-condition-window {
    z-index: 10010;
}

@media (max-width: 620px) {
    .llw-ide-main {
        grid-template-columns: 1fr;
    }

    .llw-project-panel {
        border-right: 0;
        border-bottom: 1px solid #334155;
    }

    .llw-project-panel .llw-project-tree {
        display: none;
    }

    .llw-project-panel:not(.is-collapsed) .llw-project-tree {
        display: block;
        max-height: 150px;
        overflow-y: auto;
    }

    .llw-fullscreen-overlay {
        inset: 0;
        border: 0;
        border-radius: 0;
    }

    .llw-fullscreen-overlay .llw-tool-heading {
        padding-top: 50px;
        padding-right: 8px;
    }

    .llw-code-actions {
        overflow-x: auto;
    }
}

/* Shared Fusion workspace geometry. Default and Tron share this structural core. */
.llw-workspace .llw-learning-layout {
    grid-template-columns: var(--llw-themes-pane-width, 258px) 12px minmax(520px, 1fr);
    column-gap: 4px;
}

.llw-workspace .llw-navigation {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 8px;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-themes-pane-splitter {
    display: none;
}

.llw-workspace .llw-themes-pane-splitter {
    position: relative;
    z-index: 72;
    display: grid;
    width: 12px;
    min-width: 12px;
    min-height: 0;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.llw-workspace .llw-themes-pane-splitter::before {
    content: "";
    position: absolute;
    inset: 7px 3px;
    border: 1px solid rgba(101, 167, 187, .14);
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(74, 133, 153, .06), rgba(4, 9, 13, .74));
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .78);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.llw-workspace .llw-themes-pane-splitter > span {
    position: relative;
    z-index: 1;
    width: 4px;
    height: 58px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
}

.llw-workspace .llw-themes-pane-splitter > span > i {
    width: 4px;
    min-height: 8px;
    border-radius: 99px;
    background: rgba(89, 166, 187, .27);
    box-shadow: inset 0 1px rgba(210, 249, 255, .1), 0 0 4px rgba(68, 214, 239, .04);
    transition: background .15s, box-shadow .15s, transform .15s;
}

.llw-workspace .llw-themes-pane-splitter:is(:hover, :focus-visible, .is-dragging)::before {
    border-color: rgba(103, 220, 241, .42);
    background: linear-gradient(180deg, rgba(77, 169, 194, .13), rgba(4, 10, 15, .82));
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .82), 0 0 11px rgba(65, 217, 243, .1);
}

.llw-workspace .llw-themes-pane-splitter:is(:hover, :focus-visible, .is-dragging) > span > i {
    background: rgba(128, 230, 247, .66);
    box-shadow: 0 0 7px rgba(71, 221, 244, .3);
}

.llw-workspace .llw-themes-pane-splitter.is-dragging > span > i {
    transform: scaleY(1.12);
}

.llw-workspace .llw-workspace-content {
    --llw-answer-height: 112px;
    grid-template-rows: 64px minmax(180px, 1fr) 14px var(--llw-answer-height);
    gap: 0;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

.llw-workspace .llw-workspace-content > :is(.llw-metrics, .llw-tools, .llw-condition-splitter, .llw-answer-panel) {
    min-height: 0;
}

.llw-workspace .llw-tools,
.llw-workspace .llw-tool-host,
.llw-workspace .llw-tool-host > :is(.llw-condition-embedded, .llw-ide, .llw-text-tool, .llw-table-tool, .llw-graphics-tool) {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.llw-workspace .llw-condition-embedded-body,
.llw-workspace .llw-condition-media {
    min-height: 0;
}

.llw-workspace .llw-condition-media > :is(img, canvas) {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.llw-workspace .llw-condition-splitter {
    position: relative;
    z-index: 60;
    display: grid;
    height: 14px;
    min-height: 14px;
    place-items: center;
    cursor: ns-resize;
    touch-action: none;
    background: transparent;
}

.llw-workspace .llw-condition-splitter::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 7%;
    left: 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 116, 139, .35), transparent);
}

.llw-workspace .llw-condition-splitter::after {
    content: "";
    position: relative;
    width: 68px;
    height: 10px;
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #f8fafc 0 18px, #64748b 18px 23px);
    box-shadow: 0 3px 8px rgba(15, 23, 42, .16);
    transition: width .16s ease, box-shadow .16s ease;
}

.llw-workspace .llw-condition-splitter:is(:hover, :focus-visible, .is-dragging)::after {
    width: 96px;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .16), 0 3px 8px rgba(15, 23, 42, .18);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter::before {
    background: linear-gradient(90deg, transparent, rgba(96, 183, 205, .42), transparent);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter::after {
    border-color: rgba(122, 168, 190, .22);
    background: repeating-linear-gradient(90deg, #090e14 0 18px, rgba(117, 219, 239, .72) 18px 23px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .42), inset 0 1px rgba(180, 239, 249, .05);
}

.llw-workspace .llw-answer-panel,
.llw-workspace:not([data-visual-skin="tron"]) .llw-answer-panel,
.llw-workspace[data-visual-skin="tron"] .llw-answer-panel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: var(--llw-answer-height);
    min-height: var(--llw-answer-height);
    grid-template-rows: 0 54px minmax(18px, 1fr);
    gap: 4px;
    padding: 11px 15px;
    overflow: visible;
}

.llw-workspace .llw-answer-row,
.llw-workspace .llw-answer-row textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
}

.llw-workspace .llw-theme-task-cluster {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-navigation-section {
    display: block;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed :is(.llw-panel-title, .llw-list-label-full) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-list-label-compact {
    display: inline;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-theme-task-cluster {
    padding: 3px;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-task-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1120px) {
    .llw-workspace .llw-learning-layout {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .llw-workspace :is(.llw-navigation, .llw-themes-pane-splitter) {
        display: none;
    }

    .llw-workspace .llw-workspace-content {
        grid-template-rows: 60px minmax(190px, 1fr) 44px var(--llw-answer-height);
    }

    .llw-workspace .llw-condition-splitter {
        height: 44px;
        min-height: 44px;
    }
}

@media (max-width: 900px) {
    .llw-workspace .llw-workspace-content {
        grid-template-rows: 60px minmax(170px, 1fr) 44px var(--llw-answer-height);
    }

    .llw-workspace .llw-answer-panel,
    .llw-workspace:not([data-visual-skin="tron"]) .llw-answer-panel,
    .llw-workspace[data-visual-skin="tron"] .llw-answer-panel {
        grid-template-rows: 0 50px minmax(18px, 1fr);
        padding: 9px 15px;
    }

    .llw-workspace .llw-answer-row :is(input, textarea) {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }
}

/* Active Live Lesson: one compact control zone above the shared workspace. */
.llw-workspace .llw-live-lesson-topbar {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.llw-workspace .llw-live-lesson-topbar > .llw-mode-bar {
    flex: 0 1 430px;
}

.llw-workspace .llw-live-lesson-topbar.is-active .llw-mode-selector,
.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-topbar.is-active .llw-mode-selector {
    width: min(430px, 100%);
    height: 38px;
    padding: 3px;
}

.llw-workspace .llw-live-lesson-topbar.is-active .llw-mode-selector-thumb,
.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-topbar.is-active .llw-mode-selector-thumb {
    top: 2px;
    bottom: 4px;
    left: 2px;
    width: calc((100% - 4px) / 3);
}

.llw-workspace .llw-live-lesson-topbar.is-active .llw-mode-button,
.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-topbar.is-active .llw-mode-button {
    min-height: 30px;
}

.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-topbar.is-active .llw-mode-selector-thumb i {
    margin-top: 24px;
}

.llw-workspace .llw-live-lesson-strip {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.llw-workspace .llw-live-lesson-strip[hidden] {
    display: none;
}

.llw-workspace .llw-live-lesson-strip-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}

.llw-workspace .llw-live-lesson-space-control {
    flex: 0 0 auto;
}

.llw-workspace .llw-live-lesson-space-selector {
    display: grid;
    grid-template-columns: repeat(2, auto);
    padding: 2px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--llw-surface, #fff) 90%, #64748b 10%);
}

.llw-workspace .llw-live-lesson-space-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    color: var(--llw-muted, #66758d);
    background: transparent;
    cursor: pointer;
    font: 750 11px/1 "Segoe UI", Inter, system-ui, sans-serif;
}

.llw-workspace .llw-live-lesson-space-icon {
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
    font-size: 12px;
    line-height: 1;
}

.llw-workspace .llw-live-lesson-space-button:is(:hover, :focus-visible),
.llw-workspace .llw-live-lesson-space-button.is-active {
    color: var(--llw-ink, #172033);
    background: color-mix(in srgb, var(--llw-accent, #2784ff) 14%, #fff);
}

.llw-workspace .llw-live-lesson-space-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.llw-workspace .llw-live-lesson-space-button:focus-visible,
.llw-workspace .llw-live-lesson-peer-status:focus-visible,
.llw-workspace .llw-live-lesson-icon-button:focus-visible,
.llw-workspace .llw-live-lesson-remote-level:focus-visible,
.llw-workspace .llw-live-lesson-device-action:focus-visible,
.llw-workspace .llw-live-lesson-device-item:focus-visible,
.llw-workspace .llw-live-lesson-timer:focus-visible,
.llw-workspace .llw-live-lesson-connection-action:focus-visible {
    outline: 2px solid var(--llw-accent, #2784ff);
    outline-offset: 2px;
}

.llw-workspace .llw-live-lesson-space-indicator {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 8px;
    color: var(--llw-muted, #66758d);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.llw-workspace .llw-live-lesson-peer-status,
.llw-workspace .llw-live-lesson-icon-button,
.llw-workspace .llw-live-lesson-timer {
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 8px;
    color: var(--llw-ink, #172033);
    background: color-mix(in srgb, var(--llw-surface, #fff) 94%, #64748b 6%);
}

.llw-workspace .llw-live-lesson-peer-status,
.llw-workspace .llw-live-lesson-icon-button {
    display: grid;
    width: 34px;
    min-width: 34px;
    padding: 0;
    place-items: center;
}

.llw-workspace .llw-live-lesson-icon-button {
    position: relative;
    cursor: pointer;
}

.llw-workspace .llw-live-lesson-icon-button:disabled,
.llw-workspace .llw-live-lesson-connection-action:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.llw-workspace :is(
    .llw-live-lesson-peer-status,
    .llw-live-lesson-icon-button,
    .llw-live-lesson-timer
) svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.llw-workspace .llw-live-lesson-peer-status {
    color: #8b98aa;
}

.llw-workspace .llw-live-lesson-peer-status :is(
    .llw-live-lesson-peer-connected,
    .llw-live-lesson-peer-waiting,
    .llw-live-lesson-peer-disconnected
) {
    display: none;
}

.llw-workspace .llw-live-lesson-peer-status[data-connection-state="connected"] {
    color: #168052;
}

.llw-workspace .llw-live-lesson-peer-status[data-connection-state="connected"] .llw-live-lesson-peer-connected {
    display: block;
    fill: currentColor;
    stroke: none;
}

.llw-workspace .llw-live-lesson-peer-status[data-connection-state="not_connected"] .llw-live-lesson-peer-waiting {
    display: block;
    stroke-dasharray: 3 2;
}

.llw-workspace .llw-live-lesson-peer-status[data-connection-state="disconnected"] {
    color: #d64b55;
}

.llw-workspace .llw-live-lesson-peer-status[data-connection-state="disconnected"] .llw-live-lesson-peer-disconnected {
    display: block;
}

.llw-workspace .llw-live-lesson-connection-action {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, #d97706 48%, transparent);
    border-radius: 8px;
    color: #9a5707;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    cursor: pointer;
    font: 750 11px/1 "Segoe UI", Inter, system-ui, sans-serif;
    white-space: nowrap;
}

.llw-workspace .llw-live-lesson-mic {
    overflow: visible;
}

.llw-workspace .llw-live-lesson-mic-group {
    position: relative;
    display: inline-flex;
    height: 34px;
    min-height: 34px;
    align-items: center;
    gap: 3px;
}

.llw-workspace .llw-live-lesson-mic-group[hidden] {
    display: none;
}

.llw-workspace .llw-live-lesson-mic-icon {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
}

.llw-workspace .llw-live-lesson-mic :is(
    .llw-live-lesson-mic-slash,
    .llw-live-lesson-mic-error
) {
    display: none;
}

.llw-workspace .llw-live-lesson-mic[data-mic-state="muted"] {
    color: #d97706;
}

.llw-workspace .llw-live-lesson-mic[data-mic-state="muted"] .llw-live-lesson-mic-slash,
.llw-workspace .llw-live-lesson-mic[data-mic-state="disabled"] .llw-live-lesson-mic-error {
    display: block;
}

.llw-workspace .llw-live-lesson-mic[data-mic-state="disabled"] {
    color: #d64b55;
}

.llw-workspace .llw-live-lesson-mic-level {
    position: absolute;
    z-index: 2;
    right: 2px;
    bottom: 3px;
    display: flex;
    width: 9px;
    height: 9px;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    color: #49c987;
    pointer-events: none;
}

.llw-workspace .llw-live-lesson-mic-gain {
    --llw-voice-gain-boost: 0;
    position: absolute;
    z-index: 2;
    right: 2px;
    bottom: 2px;
    display: grid;
    width: 10px;
    height: 19px;
    grid-template-rows: repeat(5, 3px);
    gap: 1px;
    color: #49c987;
    pointer-events: none;
}

.llw-workspace .llw-live-lesson-mic-gain[hidden] {
    display: none;
}

.llw-workspace .llw-live-lesson-mic-gain-bar {
    position: relative;
    box-sizing: border-box;
    width: 10px;
    height: 3px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
    border-radius: 99px;
    background: transparent;
}

.llw-workspace .llw-live-lesson-mic-gain-bar[data-active="true"] {
    border-color: currentColor;
    background: currentColor;
}

.llw-workspace .llw-live-lesson-mic-gain-bar[data-bar="5"] {
    color: #f59e0b;
}

.llw-workspace .llw-live-lesson-mic-gain-boost {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--llw-voice-gain-boost) * 100%);
    background: currentColor;
}

.llw-workspace .llw-live-lesson-mic[data-gain-overlay="true"] .llw-live-lesson-mic-level {
    opacity: 0;
}

.llw-workspace .llw-live-lesson-mic-level-bar {
    width: 1.5px;
    min-height: 2px;
    border-radius: 99px;
    background: currentColor;
    opacity: .3;
    transform: scaleY(.24);
    transform-origin: center bottom;
    transition: transform 70ms linear, opacity 70ms linear;
}

.llw-workspace .llw-live-lesson-mic-level-bar:nth-child(1) { height: 3px; }
.llw-workspace .llw-live-lesson-mic-level-bar:nth-child(2) { height: 5px; }
.llw-workspace .llw-live-lesson-mic-level-bar:nth-child(3) { height: 7px; }
.llw-workspace .llw-live-lesson-mic-level-bar:nth-child(4) { height: 9px; }

.llw-workspace .llw-live-lesson-mic-level[data-level="1"] .llw-live-lesson-mic-level-bar:nth-child(-n+1),
.llw-workspace .llw-live-lesson-mic-level[data-level="2"] .llw-live-lesson-mic-level-bar:nth-child(-n+2),
.llw-workspace .llw-live-lesson-mic-level[data-level="3"] .llw-live-lesson-mic-level-bar:nth-child(-n+3),
.llw-workspace .llw-live-lesson-mic-level[data-level="4"] .llw-live-lesson-mic-level-bar:nth-child(-n+4) {
    opacity: 1;
    transform: scaleY(1);
}

.llw-workspace .llw-live-lesson-mic[data-mic-state="muted"] .llw-live-lesson-mic-level-bar {
    opacity: .24;
    transform: scaleY(.2);
}

.llw-workspace .llw-live-lesson-remote-level {
    display: grid;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
    border-radius: 50%;
    color: #7391aa;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font: 800 9px/1 "Segoe UI Symbol", system-ui, sans-serif;
    opacity: .62;
    transition: box-shadow 70ms linear, color 70ms linear, opacity 70ms linear;
}

.llw-workspace .llw-live-lesson-remote-level[data-level="1"] {
    opacity: .78;
    box-shadow: 0 0 0 1px color-mix(in srgb, #4da8ff 18%, transparent);
}

.llw-workspace .llw-live-lesson-remote-level[data-level="2"] {
    color: #2784ff;
    opacity: .86;
    box-shadow: 0 0 0 2px color-mix(in srgb, #4da8ff 24%, transparent);
}

.llw-workspace .llw-live-lesson-remote-level[data-level="3"] {
    color: #1673d1;
    opacity: .94;
    box-shadow: 0 0 0 3px color-mix(in srgb, #4da8ff 28%, transparent);
}

.llw-workspace .llw-live-lesson-remote-level[data-level="4"] {
    color: #0f62b3;
    opacity: 1;
    box-shadow: 0 0 0 4px color-mix(in srgb, #4da8ff 32%, transparent);
}

.llw-workspace .llw-live-lesson-device-action {
    width: 16px;
    min-width: 16px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: var(--llw-muted, #66758d);
    background: transparent;
    cursor: pointer;
    font: 800 11px/1 system-ui, sans-serif;
}

.llw-workspace .llw-live-lesson-device-action:hover:not(:disabled) {
    color: var(--llw-ink, #172033);
    background: color-mix(in srgb, currentColor 9%, transparent);
}

.llw-workspace .llw-live-lesson-device-action[data-device-status="unavailable"],
.llw-workspace .llw-live-lesson-device-action[data-device-status="error"] {
    color: #d64b55;
}

.llw-workspace .llw-live-lesson-device-action:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.llw-workspace .llw-live-lesson-device-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    min-width: 220px;
    max-width: min(320px, 80vw);
    gap: 3px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 9px;
    color: var(--llw-ink, #172033);
    background: var(--llw-surface, #fff);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .2);
}

.llw-workspace .llw-live-lesson-device-menu[hidden] {
    display: none;
}

.llw-workspace .llw-live-lesson-device-item {
    overflow: hidden;
    min-height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: 650 12px/1.2 "Segoe UI", Inter, system-ui, sans-serif;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-workspace .llw-live-lesson-device-item:is(:hover, :focus-visible),
.llw-workspace .llw-live-lesson-device-item[data-selected="true"] {
    background: color-mix(in srgb, var(--llw-accent, #2784ff) 12%, transparent);
}

.llw-workspace .llw-live-lesson-device-empty {
    padding: 7px 8px;
    color: var(--llw-muted, #66758d);
    font-size: 12px;
}

.llw-workspace .llw-live-lesson-note-qr-slot[hidden] {
    display: none;
}

.llw-workspace .llw-live-lesson-note-qr-host,
.llw-workspace .llw-live-lesson-note-qr-slot {
    display: inline-flex;
    align-items: center;
}

.llw-workspace .llw-live-lesson-timer {
    display: inline-flex;
    min-width: 76px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    cursor: pointer;
    font: 750 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.llw-workspace .llw-live-lesson-timer-icon {
    display: grid;
    place-items: center;
}

.llw-workspace .llw-live-lesson-timer-icon svg {
    width: 15px;
    height: 15px;
}

.llw-workspace .llw-live-lesson-strip[data-lesson-timer="overtime"] .llw-live-lesson-timer {
    color: #d64b55;
    animation: llwLiveLessonOvertimePulse 1.35s ease-in-out infinite;
}

.llw-workspace .llw-live-lesson-end {
    border-color: color-mix(in srgb, #dc2626 54%, transparent);
    color: #c81e2a;
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

.llw-workspace .llw-live-lesson-end:hover:not(:disabled) {
    border-color: #dc2626;
    color: #fff;
    background: #dc2626;
}

.llw-workspace .llw-live-lesson-end-alert {
    display: flex;
    flex: 0 1 250px;
    min-width: 0;
    max-width: 250px;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, #dc2626 48%, transparent);
    border-radius: 8px;
    color: #991b1b;
    background: color-mix(in srgb, #fef2f2 92%, transparent);
    font: 700 11.5px/1.2 Inter, system-ui, sans-serif;
}

.llw-workspace .llw-live-lesson-end-alert::before {
    display: grid;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "!";
    font: 900 12px/1 Inter, system-ui, sans-serif;
}

.llw-workspace .llw-live-lesson-end-alert[hidden] {
    display: none;
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-live-lesson-space-selector,
    .llw-live-lesson-space-indicator,
    .llw-live-lesson-peer-status,
    .llw-live-lesson-icon-button,
    .llw-live-lesson-timer
) {
    border-color: rgba(118, 150, 176, .24);
    color: #a9bac7;
    background: linear-gradient(180deg, #121923, #090d13);
    box-shadow: 0 3px 0 #030508, inset 0 1px rgba(255, 255, 255, .04);
}

.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-space-button {
    color: #80909e;
}

.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-space-button:is(:hover, :focus-visible),
.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-space-button.is-active {
    color: #e8f8ff;
    background: rgba(85, 239, 255, .1);
    text-shadow: 0 0 9px var(--llw-mode-glow);
}

.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-peer-status[data-connection-state="connected"] {
    color: #67f3b1;
}

.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-peer-status[data-connection-state="disconnected"],
.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-strip[data-lesson-timer="overtime"] .llw-live-lesson-timer,
.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-end {
    color: #ff737b;
}

.llw-workspace[data-visual-skin="tron"] .llw-live-lesson-end-alert {
    border-color: rgba(255, 115, 123, .48);
    color: #ff9ba1;
    background: rgba(94, 18, 27, .44);
    box-shadow: inset 0 0 14px rgba(255, 73, 85, .08);
}

@media (max-width: 900px) {
    .llw-workspace .llw-live-lesson-topbar.is-active {
        flex-wrap: wrap;
    }

    .llw-workspace .llw-live-lesson-topbar.is-active > .llw-mode-bar,
    .llw-workspace .llw-live-lesson-topbar.is-active > .llw-live-lesson-strip {
        flex: 1 1 100%;
    }

    .llw-workspace .llw-live-lesson-topbar.is-active .llw-mode-selector,
    .llw-workspace[data-visual-skin="tron"] .llw-live-lesson-topbar.is-active .llw-mode-selector {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .llw-workspace .llw-live-lesson-strip {
        flex-wrap: wrap;
        gap: 4px;
    }

    .llw-workspace .llw-live-lesson-space-button {
        padding-inline: 7px;
    }

    .llw-workspace .llw-live-lesson-strip-spacer {
        min-width: 0;
    }

    .llw-workspace .llw-live-lesson-end-alert {
        order: 10;
        flex: 1 1 100%;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .llw-workspace .llw-live-lesson-strip[data-lesson-timer="overtime"] .llw-live-lesson-timer {
        animation: none;
    }
}

/* Frozen Fusion task-navigation responsive chain. */
@media (max-width: 1120px) {
    .llw-workspace[data-visual-skin="tron"] .llw-learning-layout,
    .llw-workspace[data-visual-skin="tron"] .llw-learning-layout.is-navigation-collapsed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 116px minmax(0, 1fr);
        gap: 5px;
    }

    .llw-workspace[data-visual-skin="tron"] .llw-navigation {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 5px;
    }

    .llw-workspace[data-visual-skin="tron"] .llw-navigation-toggle {
        align-self: start;
        justify-self: stretch;
    }

    .llw-workspace[data-visual-skin="tron"] .llw-theme-list.theme-list {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 5px !important;
        padding: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .llw-workspace[data-visual-skin="tron"] .llw-theme-list.theme-list::before {
        display: none !important;
    }

    .llw-workspace[data-visual-skin="tron"] .theme-item {
        flex: 0 0 150px !important;
    }

    .llw-workspace[data-visual-skin="tron"] .theme-item.is-selected {
        flex-basis: min(440px, calc(100vw - 74px)) !important;
    }

    .llw-workspace[data-visual-skin="tron"] .theme-button {
        height: 42px !important;
        min-height: 42px !important;
    }

    .llw-workspace[data-visual-skin="tron"] .theme-tasks.llw-task-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        padding: 8px 5px 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .llw-workspace[data-visual-skin="tron"] .theme-tasks .task-key {
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }
}

@media (max-width: 620px) {
    .llw-workspace[data-visual-skin="tron"] .theme-item.is-selected {
        flex-basis: min(330px, calc(100vw - 70px));
    }
}

@media (forced-colors: active) {
    .llw-workspace[data-visual-skin="tron"] .theme-button__aperture,
    .llw-workspace[data-visual-skin="tron"] .task-key::after {
        background: CanvasText;
        box-shadow: none;
    }
}

/* Frozen Fusion timer variant cycle: presentation only, shared by Default and Tron. */
@property --timer-completion {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
}

.llw-workspace .llw-timer-instrument {
    --timer-progress: 0%;
    --timer-linear-progress: 0%;
    --timer-progress-color-rgb: 56 189 108;
    --timer-story-tip-rgb: 56 189 108;
    --timer-completion: 0%;
    --timer-bubble-scale: .48;
    --timer-eclipse-shadow-shift: 100%;
    --timer-target: 72%;
    --timer-signal: #50e997;
    cursor: pointer;
    user-select: none;
}

.llw-workspace .llw-timer-instrument[data-timer-state="steady"] { --timer-signal: #e5cc58; }
.llw-workspace .llw-timer-instrument[data-timer-state="near"] { --timer-signal: #ff9a55; }
.llw-workspace .llw-timer-instrument[data-timer-state="overflow"] { --timer-signal: #ff665d; }

.llw-workspace .llw-timer-instrument:focus-visible {
    outline: 2px solid #ffd75a;
    outline-offset: 3px;
}

.llw-timer-concepts,
.llw-timer-concepts > .timer-concept {
    position: absolute;
    inset: 1px;
    min-width: 0;
}

.llw-timer-concepts > .timer-concept[hidden] {
    display: none !important;
}

.llw-timer-concepts .timer-concept--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 10px;
    gap: 4px;
    padding: 0 6px;
}

.llw-timer-concepts .timer-instrument__scale {
    position: relative;
    grid-row: 2;
    align-self: end;
    height: 10px;
    overflow: visible;
    border: 1px solid rgba(112, 145, 168, .18);
    border-radius: 99px;
    background: #030508;
    box-shadow: inset 0 3px 5px #000;
}

.llw-timer-concepts .timer-instrument__scale::before {
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #50e997 0%, #d9dc55 45%, #ffae42 74%, #ff5a5f 100%);
    opacity: .15;
    content: "";
}

.llw-timer-concepts .timer-instrument__fill {
    position: absolute;
    z-index: 2;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(var(--timer-progress) - 4px);
    min-width: 3px;
    max-width: calc(100% - 4px);
    border-radius: inherit;
    background: linear-gradient(90deg, #50e997 0%, #d9dc55 48%, #ffae42 76%, #ff5a5f 100%);
    box-shadow: 0 0 7px rgba(90, 232, 166, .34);
    transition: width 300ms linear;
}

.llw-timer-concepts .timer-concept--rail .timer-recommended-marker {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: var(--timer-target);
    width: 8px;
    height: 15px;
    border: 2px solid #dffcff;
    border-radius: 50%;
    background: #0a1017;
    box-shadow: 0 0 8px rgba(99, 231, 248, .5);
    transform: translate(-50%, -50%);
    transition: left 300ms linear;
}

.llw-timer-instrument[data-timer-state="steady"] .timer-concept--rail .timer-recommended-marker {
    border-color: #f2d75c;
    box-shadow: 0 0 8px rgba(241, 206, 71, .54);
}

.llw-timer-instrument:is([data-timer-state="near"], [data-timer-state="overflow"]) .timer-concept--rail .timer-recommended-marker {
    border-color: #ff725d;
    box-shadow: 0 0 9px rgba(255, 94, 79, .58);
}

.llw-timer-concepts :is(
    .timer-concept--eclipse,
    .timer-concept--eggs,
    .timer-concept--bubble,
    .timer-concept--bomb
) {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: 42px 2px;
    align-items: center;
    gap: 2px 7px;
    min-height: 48px;
    padding: 0 4px 0 1px;
}

.llw-timer-concepts :is(
    .timer-eclipse__scene,
    .timer-eggs__scene,
    .timer-bubble__scene,
    .timer-bomb__scene
) {
    position: relative;
    grid-row: 1;
    width: 76px;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgba(92, 123, 145, .2);
    border-radius: 5px;
    background: linear-gradient(145deg, #111926, #03070c 72%);
    box-shadow: inset 0 5px 9px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(167, 211, 226, .04);
}

.llw-timer-concepts :is(
    .timer-concept--eclipse,
    .timer-concept--eggs,
    .timer-concept--bubble,
    .timer-concept--bomb
) .timer-led-strip {
    position: relative;
    z-index: 8;
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    height: 2px;
    overflow: visible;
    border-radius: 99px;
    background: rgba(2, 7, 10, .92);
    box-shadow: inset 0 1px 2px #000;
}

.llw-timer-concepts .timer-led-strip > i {
    position: absolute;
    inset: 0;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bd6c 0%, #2acfa9 34%, #3ad0e5 50%, #f5ca31 68%, #f77d23 84%, #ef4444 100%);
    clip-path: inset(0 calc(100% - var(--timer-linear-progress)) 0 0);
    box-shadow: 0 0 5px rgb(var(--timer-story-tip-rgb) / .34);
    transition: clip-path 320ms linear;
}

.llw-timer-concepts .timer-led-strip > b {
    position: absolute;
    top: 50%;
    left: var(--timer-linear-progress);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgb(var(--timer-story-tip-rgb));
    box-shadow: 0 0 3px rgb(var(--timer-story-tip-rgb) / .84), 0 0 7px rgb(var(--timer-story-tip-rgb) / .42);
    opacity: .68;
    transform: translate(-50%, -50%);
}

.llw-timer-instrument[data-timer-urgent="true"] .timer-led-strip > b {
    opacity: 1;
    animation: llwTimerLedDangerPulse .86s ease-in-out infinite alternate;
}

.llw-timer-instrument[data-timer-urgent="true"] .llw-timer-elapsed {
    animation: llwTimerUrgentPulse 1.55s ease-in-out infinite;
}

@keyframes llwTimerLedDangerPulse {
    from { filter: brightness(.96); transform: translate(-50%, -50%) scale(.9); }
    to { filter: brightness(1.28); transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes llwTimerUrgentPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 8px rgba(255, 154, 85, .14); }
    50% { transform: scale(1.035); text-shadow: 0 0 11px rgba(255, 126, 82, .38); }
}

/* Lunar Eclipse. */
.llw-timer-concepts .timer-concept--eclipse {
    position: absolute;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    isolation: isolate;
}

.llw-timer-concepts .timer-eclipse__scene {
    position: absolute;
    inset: 0 0 6px;
    width: auto;
    height: auto;
    background:
        radial-gradient(circle at 8% 22%, rgba(210, 239, 248, .52) 0 1px, transparent 1.4px),
        radial-gradient(circle at 43% 76%, rgba(173, 214, 231, .38) 0 1px, transparent 1.4px),
        radial-gradient(ellipse at 28% 50%, rgba(68, 105, 139, .13), transparent 40%),
        linear-gradient(145deg, #07101a, #020408 72%);
}

.llw-timer-concepts :is(.timer-eclipse__corona, .timer-eclipse__moon, .timer-eclipse__shadow, .timer-eclipse__stars) {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.llw-timer-concepts .timer-eclipse__corona {
    top: 0;
    left: 24px;
    width: 44px;
    height: 44px;
    background: rgba(214, 239, 244, .2);
    filter: blur(5px);
    opacity: .28;
    transform: scale(.9);
    transition: background 500ms ease, opacity 500ms ease, transform 500ms ease;
}

.llw-timer-concepts .timer-eclipse__moon {
    z-index: 2;
    top: 3px;
    left: 28px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 31%, rgba(255, 255, 255, .7) 0 2px, transparent 2.8px),
        radial-gradient(circle at 63% 68%, rgba(117, 126, 127, .22) 0 3px, transparent 3.8px),
        radial-gradient(circle at 43% 45%, #fffef4 0 28%, #deded2 67%, #9ca8a8 100%);
    box-shadow: inset -4px -3px 6px rgba(60, 72, 78, .25), 0 0 8px rgba(221, 244, 247, .44);
    transition: background 500ms ease, box-shadow 500ms ease, filter 500ms ease;
}

.llw-timer-concepts .timer-eclipse__shadow {
    z-index: 3;
    top: -1px;
    left: var(--timer-eclipse-shadow-shift, 100%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 37% 45%, #030508 0 58%, #0b1116 78%, rgba(25, 31, 35, .96) 100%);
    box-shadow: -2px 0 4px rgba(6, 8, 10, .62);
    opacity: 0;
    transition: left 700ms linear, opacity 420ms ease;
}

.llw-timer-concepts .timer-eclipse__stars {
    inset: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 86% 19%, rgba(211, 240, 248, .54) 0 1px, transparent 1.4px),
        radial-gradient(circle at 9% 79%, rgba(185, 224, 238, .38) 0 1px, transparent 1.4px);
    opacity: .56;
}

.llw-timer-instrument:not([data-timer-stage="q1"]) .timer-eclipse__shadow { opacity: .98; }
.llw-timer-instrument[data-timer-stage="q3"] .timer-eclipse__moon { filter: saturate(.8) brightness(.86); }

.llw-timer-instrument:is([data-timer-stage="q4"], [data-timer-stage="overtime"]) .timer-eclipse__corona {
    background: rgba(255, 76, 58, .55);
    opacity: .82;
    transform: scale(1.14);
}

.llw-timer-instrument:is([data-timer-stage="q4"], [data-timer-stage="overtime"]) .timer-eclipse__moon {
    background:
        radial-gradient(circle at 34% 31%, rgba(255, 200, 172, .37) 0 2px, transparent 2.8px),
        radial-gradient(circle at 63% 68%, rgba(74, 21, 20, .32) 0 3px, transparent 3.8px),
        radial-gradient(circle at 43% 45%, #d96655 0 28%, #8f302d 68%, #3b1518 100%);
    box-shadow: inset -5px -3px 7px rgba(27, 3, 7, .52), 0 0 11px rgba(255, 76, 58, .55);
    filter: none;
}

.llw-timer-instrument[data-timer-stage="overtime"] .timer-eclipse__corona {
    animation: llwEclipseOvertimeBreath 2.4s ease-in-out infinite alternate;
}

@keyframes llwEclipseOvertimeBreath {
    from { opacity: .55; transform: scale(1.04); }
    to { opacity: .94; transform: scale(1.24); }
}

/* Frying Eggs. */
.llw-timer-concepts .timer-eggs__scene {
    --egg-white: rgba(223, 235, 226, .14);
    --egg-edge: rgba(233, 246, 236, .2);
    --egg-yolk: #cd9534;
    --egg-pan: #111820;
    --egg-crust: rgba(115, 55, 24, 0);
}

.llw-timer-concepts .timer-eggs__pan {
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 5px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 2px solid #64747d;
    border-radius: 50%;
    background:
        radial-gradient(circle at 44% 38%, rgba(221, 239, 242, .08), transparent 46%),
        radial-gradient(circle at 50% 52%, var(--egg-pan) 0 63%, #080b0d 66% 100%);
    box-shadow: inset 0 4px 8px #000, inset 0 0 0 1px rgba(173, 206, 218, .12), 0 2px 3px #000, 0 0 7px rgba(109, 184, 205, .12);
    transform: rotate(-5deg);
    transition: background 520ms ease, border-color 520ms ease;
}

.llw-timer-concepts .timer-eggs__handle {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: 38px;
    width: 29px;
    height: 7px;
    border: 1px solid #5a6a73;
    border-radius: 0 7px 7px 0;
    background: linear-gradient(180deg, #3b4850, #10161a 72%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 2px 3px #000;
    transform: rotate(7deg);
}

.llw-timer-concepts .timer-eggs__egg {
    position: absolute;
    display: block;
    width: 21px;
    height: 16px;
    border: 1px solid var(--egg-edge);
    border-radius: 58% 42% 61% 39% / 46% 57% 43% 54%;
    background: var(--egg-white);
    box-shadow: inset 0 -2px 3px rgba(90, 67, 39, .08);
    transition: background 520ms ease, border-color 520ms ease, box-shadow 520ms ease;
}

.llw-timer-concepts .timer-eggs__egg--one { top: 5px; left: 2px; transform: rotate(-7deg); }
.llw-timer-concepts .timer-eggs__egg--two { right: 1px; bottom: 4px; transform: rotate(9deg) scale(.92); }

.llw-timer-concepts .timer-eggs__yolk {
    position: absolute;
    top: 4px;
    left: 6px;
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #ffe9a2 0 10%, var(--egg-yolk) 38%, #9b5c19 100%);
    box-shadow: inset -1px -2px 2px rgba(79, 43, 8, .28), 0 1px 2px rgba(0, 0, 0, .2);
    transition: background 520ms ease, filter 520ms ease;
}

.llw-timer-concepts .timer-eggs__crust {
    position: absolute;
    z-index: 4;
    inset: 2px 3px;
    border: 2px solid var(--egg-crust);
    border-radius: 50%;
    transition: border-color 520ms ease, box-shadow 520ms ease;
}

.llw-timer-concepts .timer-eggs__smoke {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 8px;
    width: 35px;
    height: 29px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.llw-timer-concepts .timer-eggs__smoke::before,
.llw-timer-concepts .timer-eggs__smoke::after,
.llw-timer-concepts .timer-eggs__smoke i {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 20px;
    border-radius: 56% 44% 62% 38%;
    background:
        radial-gradient(ellipse at 48% 84%, rgba(184, 198, 196, .82) 0 18%, transparent 45%),
        radial-gradient(ellipse at 28% 54%, rgba(213, 225, 222, .62) 0 16%, transparent 44%),
        radial-gradient(ellipse at 67% 24%, rgba(226, 235, 232, .42) 0 14%, transparent 42%);
    filter: blur(.52px) drop-shadow(0 0 2px rgba(205, 220, 217, .24));
    mix-blend-mode: screen;
    transform-origin: 50% 100%;
    animation: llwEggSmokePlume 2.35s cubic-bezier(.24, .18, .32, 1) infinite;
}

.llw-timer-concepts .timer-eggs__smoke::before,
.llw-timer-concepts .timer-eggs__smoke::after { content: ""; }
.llw-timer-concepts .timer-eggs__smoke i:nth-child(1) { left: 6%; width: 3px; animation-delay: -.28s; animation-duration: 2.15s; }
.llw-timer-concepts .timer-eggs__smoke i:nth-child(2) { left: 31%; width: 5px; animation-delay: -1.24s; animation-duration: 2.7s; }
.llw-timer-concepts .timer-eggs__smoke i:nth-child(3) { left: 59%; animation-delay: -1.86s; animation-duration: 2.4s; }
.llw-timer-concepts .timer-eggs__smoke::before { left: 79%; width: 5px; animation-delay: -.82s; animation-duration: 2.55s; }
.llw-timer-concepts .timer-eggs__smoke::after { left: 44%; width: 3px; animation-delay: -2.08s; animation-duration: 2.9s; }

.llw-timer-instrument[data-timer-stage="q2"] .timer-eggs__scene { --egg-white: rgba(241, 243, 231, .42); --egg-edge: rgba(244, 239, 211, .5); --egg-yolk: #e0a02c; --egg-crust: rgba(148, 86, 36, .08); }
.llw-timer-instrument[data-timer-stage="q3"] .timer-eggs__scene { --egg-white: rgba(246, 236, 202, .82); --egg-edge: rgba(209, 181, 125, .72); --egg-yolk: #d78c20; --egg-pan: #171817; --egg-crust: rgba(143, 75, 28, .32); }
.llw-timer-instrument[data-timer-stage="q4"] .timer-eggs__scene { --egg-white: #c29e68; --egg-edge: #6f4025; --egg-yolk: #9d5517; --egg-pan: #130e0c; --egg-crust: rgba(70, 29, 18, .88); }
.llw-timer-instrument[data-timer-stage="q4"] .timer-eggs__smoke { opacity: .46; }

.llw-timer-instrument[data-timer-stage="overtime"] .timer-eggs__scene {
    --egg-white: #2c211b;
    --egg-edge: #916a50;
    --egg-yolk: #512a17;
    --egg-pan: #080706;
    --egg-crust: rgba(13, 5, 3, .98);
}

.llw-timer-instrument[data-timer-stage="overtime"] .timer-eggs__smoke { opacity: 1; }

@keyframes llwEggSmokePlume {
    0% { opacity: 0; transform: translate3d(0, 7px, 0) scale(.68, .76) rotate(-4deg); }
    12% { opacity: .62; }
    34% { opacity: .82; transform: translate3d(2px, 0, 0) scale(.88, 1.05) rotate(5deg); }
    68% { opacity: .52; transform: translate3d(-2px, -8px, 0) scale(1.06, 1.34) rotate(-6deg); }
    86% { opacity: .28; }
    100% { opacity: 0; transform: translate3d(3px, -16px, 0) scale(1.28, 1.66) rotate(7deg); }
}

/* Bubble Gum. */
.llw-timer-concepts .timer-bubble__scene {
    overflow: visible;
    background: radial-gradient(circle at 46% 42%, rgba(114, 179, 71, .09), transparent 38%), linear-gradient(145deg, #111a18, #03070c 72%);
}

.llw-timer-concepts .timer-bubble__face {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 6px;
    width: 36px;
    height: 34px;
    border: 1px solid rgba(152, 211, 92, .34);
    border-radius: 46% 46% 42% 42%;
    background: radial-gradient(circle at 32% 34%, rgba(209, 239, 153, .23), transparent 18%), linear-gradient(145deg, #789746, #344f25 66%, #182515);
    box-shadow: inset -5px -6px 8px rgba(7, 18, 7, .48), 0 0 7px rgba(109, 177, 64, .1);
    transition: filter 260ms ease, background 260ms ease, transform 240ms ease;
}

.llw-timer-concepts .timer-bubble__ear { position: absolute; z-index: -1; top: 4px; width: 12px; height: 9px; border: 1px solid #526d33; background: #6f8d43; box-shadow: inset 0 0 0 3px #344c29; }
.llw-timer-concepts .timer-bubble__ear--left { left: -8px; border-radius: 72% 28% 48% 52%; transform: rotate(14deg); }
.llw-timer-concepts .timer-bubble__ear--right { right: -8px; border-radius: 28% 72% 52% 48%; transform: rotate(-14deg); }

.llw-timer-concepts .timer-bubble__eye { position: absolute; top: 9px; width: 8px; height: 6px; border-radius: 52% 52% 44% 44%; background: #e6e5c9; box-shadow: inset 0 -2px rgba(84, 91, 55, .25); transition: height 220ms ease, transform 220ms ease; }
.llw-timer-concepts .timer-bubble__eye--left { left: 7px; }
.llw-timer-concepts .timer-bubble__eye--right { right: 7px; }
.llw-timer-concepts .timer-bubble__eye > i { position: absolute; top: 2px; left: 3px; width: 3px; height: 3px; border-radius: 50%; background: #162112; }
.llw-timer-concepts .timer-bubble__brow { position: absolute; z-index: 2; top: 6px; width: 9px; height: 2px; border-radius: 99px; background: #26391e; transition: transform 220ms ease; }
.llw-timer-concepts .timer-bubble__brow--left { left: 6px; transform: rotate(5deg); }
.llw-timer-concepts .timer-bubble__brow--right { right: 6px; transform: rotate(-5deg); }
.llw-timer-concepts .timer-bubble__nose { position: absolute; top: 15px; left: 13px; width: 9px; height: 6px; border: 1px solid rgba(31, 56, 22, .52); border-radius: 54% 54% 45% 45%; background: radial-gradient(circle at 28% 54%, #263a1e 0 1px, transparent 1.5px), radial-gradient(circle at 72% 54%, #263a1e 0 1px, transparent 1.5px), rgba(95, 130, 55, .7); }
.llw-timer-concepts .timer-bubble__cheek { position: absolute; top: 18px; width: 8px; height: 6px; border-radius: 50%; background: rgba(177, 77, 66, .08); filter: blur(.3px); transition: background-color 240ms ease, box-shadow 240ms ease, transform 220ms ease; }
.llw-timer-concepts .timer-bubble__cheek--left { left: 3px; }
.llw-timer-concepts .timer-bubble__cheek--right { right: 3px; }
.llw-timer-concepts .timer-bubble__mouth { position: absolute; bottom: 3px; left: 14px; width: 9px; height: 6px; box-sizing: border-box; border: 2px solid #29391f; border-radius: 50%; background: #543238; transition: width 220ms ease, height 220ms ease, left 220ms ease, transform 220ms ease, border-color 220ms ease; }

.llw-timer-concepts .timer-bubble__gum {
    position: absolute;
    z-index: 6;
    top: 19px;
    left: 29px;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 197, 248, .78);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .68) 0 8%, transparent 12%), radial-gradient(circle at 40% 38%, rgba(255, 168, 238, .88), rgba(188, 71, 181, .56) 62%, rgba(91, 23, 103, .38));
    box-shadow: inset -4px -5px 8px rgba(79, 13, 87, .25), 0 0 8px rgba(244, 100, 224, .25);
    transform: scale(var(--timer-bubble-scale, .48));
    transform-origin: 0 50%;
    transition: transform 420ms cubic-bezier(.2, .72, .22, 1), filter 320ms ease, opacity 160ms ease;
}

.llw-timer-concepts .timer-bubble__gum::after { position: absolute; z-index: -1; top: 10px; left: -5px; width: 8px; height: 5px; border: 1px solid rgba(255, 190, 244, .66); border-right: 0; border-radius: 64% 0 0 48%; background: linear-gradient(180deg, #df78d2, #a73a9f); box-shadow: 0 0 4px rgba(240, 96, 218, .28); transform: rotate(3deg); content: ""; }
.llw-timer-concepts .timer-bubble__stuck-gum { position: absolute; z-index: 7; inset: 0; opacity: 0; pointer-events: none; }
.llw-timer-concepts .timer-bubble__stuck-gum-mass { position: absolute; top: 13px; left: 16px; width: 36px; height: 28px; background: radial-gradient(ellipse at 29% 24%, rgba(255, 230, 250, .78), transparent 15%), radial-gradient(ellipse at 68% 68%, rgba(103, 23, 101, .46), transparent 43%), linear-gradient(142deg, #ee91dd 0 18%, #c94fbd 54%, #791f73 100%); filter: drop-shadow(0 2px 2px rgba(49, 8, 54, .66)) drop-shadow(0 0 4px rgba(241, 107, 220, .3)); clip-path: polygon(2% 31%, 14% 16%, 30% 20%, 42% 5%, 57% 16%, 72% 9%, 88% 25%, 97% 43%, 86% 55%, 98% 73%, 83% 89%, 66% 82%, 51% 100%, 37% 84%, 18% 93%, 5% 74%, 13% 55%, 0 44%); transform: rotate(-4deg); }

.llw-timer-instrument[data-timer-stage="q2"] .timer-bubble__brow--left { transform: rotate(11deg) translateY(.5px); }
.llw-timer-instrument[data-timer-stage="q2"] .timer-bubble__brow--right { transform: rotate(-11deg) translateY(.5px); }
.llw-timer-instrument[data-timer-stage="q3"] .timer-bubble__brow--left { transform: rotate(21deg) translateY(1px); }
.llw-timer-instrument[data-timer-stage="q3"] .timer-bubble__brow--right { transform: rotate(-21deg) translateY(1px); }
.llw-timer-instrument[data-timer-stage="q4"] .timer-bubble__brow--left { transform: rotate(29deg) translateY(1.5px); }
.llw-timer-instrument[data-timer-stage="q4"] .timer-bubble__brow--right { transform: rotate(-29deg) translateY(1.5px); }
.llw-timer-instrument[data-timer-stage="q4"] .timer-bubble__cheek { background: rgba(225, 73, 68, .52); box-shadow: 0 0 6px rgba(222, 63, 66, .24); transform: scale(1.22); }
.llw-timer-instrument[data-timer-stage="overtime"] .timer-bubble__gum { opacity: 0; }
.llw-timer-instrument[data-timer-stage="overtime"] .timer-bubble__stuck-gum { opacity: .98; animation: llwBubbleGumImpact .72s cubic-bezier(.18, .78, .22, 1) 1 both; }

@keyframes llwBubbleGumImpact {
    0% { opacity: 0; transform: translateX(7px) scale(1.28, .72) rotate(5deg); filter: brightness(1.42); }
    42% { opacity: 1; transform: translateX(-1px) scale(.94, 1.08) rotate(-3deg); filter: brightness(1.14); }
    72% { transform: translateX(0) scale(1.03, .97) rotate(1deg); filter: brightness(.98); }
    100% { opacity: .98; transform: none; filter: brightness(.92); }
}

/* Bomb Fuse. */
.llw-timer-instrument[data-timer-variant="bomb"] { transition: --timer-completion 1050ms linear; }
.llw-timer-concepts .timer-bomb__scene { overflow: visible; background: radial-gradient(circle at 72% 58%, rgba(104, 158, 177, .08), transparent 36%), linear-gradient(145deg, #111923, #03070c 72%); }
.llw-timer-concepts .timer-bomb__body { position: absolute; z-index: 2; bottom: 4px; left: 48px; width: 28px; height: 28px; border: 2px solid #384753; border-radius: 50%; background: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .15), transparent 16%), radial-gradient(circle at 42% 38%, #1c2933, #070b10 72%); box-shadow: inset -5px -6px 8px #020305, 0 2px 4px #000, 0 0 7px rgba(88, 211, 232, .08); }
.llw-timer-concepts .timer-bomb__body > b { position: absolute; top: -4px; left: 0; width: 9px; height: 7px; border: 1px solid #4c5d68; border-radius: 3px 3px 0 0; background: #151d23; transform: rotate(-25deg); }
.llw-timer-concepts .timer-bomb__fuse { position: absolute; z-index: 3; top: 10px; left: 5px; width: 47px; height: 13px; background: transparent; }
.llw-timer-concepts .timer-bomb__fuse::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(90deg, transparent 0 var(--timer-completion), #9b7448 var(--timer-completion) 100%); clip-path: polygon(0 31%, 14% 16%, 28% 43%, 42% 25%, 56% 52%, 70% 31%, 84% 55%, 100% 43%, 100% 66%, 84% 77%, 70% 54%, 56% 75%, 42% 50%, 28% 68%, 14% 42%, 0 57%); content: ""; }
.llw-timer-concepts .timer-bomb__spark { position: absolute; z-index: 2; top: 50%; left: var(--timer-completion); width: 8px; height: 8px; background: radial-gradient(circle at 45% 60%, #fff5b5 0 18%, #ff9d31 22% 54%, #f64d2f 58% 76%, transparent 80%); box-shadow: 0 0 4px #fff1a1, 0 0 8px #ff9d31, 0 0 13px rgba(255, 68, 37, .55); transform: translate(-50%, -50%) rotate(45deg); animation: llwBombFlameFlicker .24s steps(3, end) infinite alternate; }
.llw-timer-concepts .timer-bomb__ember-trail { position: absolute; z-index: 1; top: 50%; left: calc(var(--timer-completion) - 7%); width: 12px; height: 8px; background: radial-gradient(circle at 18% 68%, rgba(255, 180, 72, .9) 0 1px, transparent 1.5px), radial-gradient(circle at 52% 24%, rgba(255, 113, 45, .74) 0 1px, transparent 1.5px), radial-gradient(circle at 82% 61%, rgba(255, 215, 118, .7) 0 1px, transparent 1.5px); filter: drop-shadow(0 0 3px rgba(255, 105, 38, .55)); opacity: .78; transform: translate(-24%, -50%); animation: llwBombEmberTrail .46s steps(3, end) infinite alternate; }
.llw-timer-concepts .timer-bomb__blast { position: absolute; z-index: 5; inset: -5px -8px -5px -5px; display: block; overflow: visible; opacity: 0; background: radial-gradient(circle at 72% 58%, rgba(255, 252, 211, .98) 0 5%, rgba(255, 163, 57, .9) 10%, rgba(239, 67, 42, .62) 19%, rgba(77, 64, 63, .3) 32%, transparent 49%), conic-gradient(from 8deg at 72% 58%, transparent 0 8%, rgba(255, 185, 65, .54) 9% 11%, transparent 12% 24%, rgba(239, 68, 45, .45) 25% 28%, transparent 29% 45%, rgba(255, 201, 87, .42) 46% 48%, transparent 49% 100%); }
.llw-timer-concepts .timer-bomb__shock { position: absolute; top: 11px; left: 44px; width: 35px; height: 35px; border: 2px solid rgba(255, 182, 72, .54); border-radius: 50%; }
.llw-timer-concepts .timer-bomb__debris { position: absolute; top: 21px; left: 60px; width: 5px; height: 3px; border-radius: 1px; background: #5f4b3c; }
.llw-timer-concepts .timer-bomb__debris--one { transform: translate(-24px, -13px) rotate(28deg); }
.llw-timer-concepts .timer-bomb__debris--two { transform: translate(19px, 9px) rotate(-31deg); }
.llw-timer-concepts .timer-bomb__smoke { position: absolute; top: 7px; left: 56px; width: 18px; height: 14px; border-radius: 50%; background: rgba(92, 101, 105, .48); filter: blur(3px); }
.llw-timer-concepts .timer-bomb__boom { position: absolute; z-index: 8; top: 12px; right: -2px; color: #fff3b3; font-family: "Arial Black", Impact, sans-serif; font-size: 11px; font-weight: 950; line-height: .9; letter-spacing: -.05em; text-shadow: 0 1px #7c241d, 0 0 5px #ff8d39; transform: rotate(-8deg) scale(.86); }

.llw-timer-instrument[data-timer-stage="overtime"] :is(.timer-bomb__body, .timer-bomb__fuse) { opacity: 0; }
.llw-timer-instrument[data-timer-stage="overtime"] .timer-bomb__blast { opacity: .78; animation: llwExpressiveBombBlast 1.15s ease-out 1 both; }
.llw-timer-instrument[data-timer-stage="overtime"] .timer-bomb__shock { animation: llwBombShockRelease .72s ease-out 1 both; }
.llw-timer-instrument[data-timer-stage="overtime"] .timer-bomb__boom { animation: llwBombBoomWord .82s cubic-bezier(.16, .78, .2, 1) 1 both; }

@keyframes llwBombFlameFlicker {
    0% { filter: brightness(.88); transform: translate(-50%, -50%) rotate(37deg) scale(.82, 1.03); }
    48% { filter: brightness(1.34); transform: translate(-50%, -53%) rotate(49deg) scale(1.16, .9); }
    100% { filter: brightness(1.08); transform: translate(-50%, -47%) rotate(55deg) scale(.94, 1.2); }
}

@keyframes llwBombEmberTrail { from { opacity: .42; } to { opacity: .9; filter: brightness(1.28) drop-shadow(0 0 4px rgba(255, 105, 38, .72)); } }
@keyframes llwExpressiveBombBlast { 0% { opacity: 0; transform: scale(.52); filter: brightness(1.6); } 48% { opacity: .94; transform: scale(1.03); filter: brightness(1); } 100% { opacity: .78; transform: scale(1.06); filter: brightness(.82); } }
@keyframes llwBombShockRelease { from { opacity: .9; transform: scale(.25); } to { opacity: 0; transform: scale(1.5); } }
@keyframes llwBombBoomWord { 0% { opacity: 0; transform: rotate(-8deg) scale(.35); } 28%, 58% { opacity: 1; transform: rotate(-8deg) scale(1.08); } 100% { opacity: .94; transform: rotate(-8deg) scale(.96) translateY(-2px); } }

/* Imported Progress Bar. */
.llw-timer-concepts .timer-concept--bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    padding: 5px 7px;
    overflow: hidden;
    isolation: isolate;
}

.llw-timer-concepts .timer-concept--bar::before {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: var(--timer-linear-progress);
    max-width: 100%;
    background: rgb(var(--timer-progress-color-rgb) / .24);
    transition: width 350ms linear, background-color 350ms linear;
    pointer-events: none;
    content: "";
}

.llw-timer-instrument:is([data-progress-band="danger"], [data-progress-band="expired"]) .timer-concept--bar::before {
    background: rgb(var(--timer-progress-color-rgb) / .34);
}

.llw-timer-concepts .timer-concept--bar .timer-recommended-marker {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: var(--timer-target);
    width: 2px;
    background: #dffcff;
    box-shadow: 0 0 7px rgba(99, 231, 248, .5);
}

@media (prefers-reduced-motion: reduce) {
    .llw-timer-instrument,
    .llw-timer-instrument *,
    .llw-timer-instrument *::before,
    .llw-timer-instrument *::after {
        transition: none !important;
        animation: none !important;
    }

    .llw-timer-instrument[data-timer-stage="overtime"] .timer-bubble__stuck-gum {
        opacity: .98;
        transform: none;
        filter: brightness(.92);
    }
}

.llw-workspace[data-learning-motion="reduced"] .llw-timer-instrument,
.llw-workspace[data-learning-motion="reduced"] .llw-timer-instrument *,
.llw-workspace[data-learning-motion="reduced"] .llw-timer-instrument *::before,
.llw-workspace[data-learning-motion="reduced"] .llw-timer-instrument *::after {
    transition: none !important;
    animation: none !important;
}

@media (forced-colors: active) {
    .llw-timer-concepts :is(.timer-led-strip, .timer-concept--bar, .timer-instrument__scale) {
        border: 2px solid Highlight;
        forced-color-adjust: auto;
    }
}

@media (max-width: 620px) {
    .llw-workspace .llw-workspace-content {
        --llw-answer-height: 96px;
    }
}

/* Local runtime and viewport-height refinement. */
.llw-workspace-stage {
    min-height: max(610px, calc(100vh - 150px));
}

.llw-workspace-empty {
    min-height: max(610px, calc(100vh - 150px));
}

.llw-workspace-content {
    min-height: calc(100vh - 150px);
    align-content: start;
    padding: 10px 12px 12px;
}

.llw-workspace-content.has-manual-ide-height {
    grid-template-rows:
        auto
        minmax(180px, var(--llw-work-area-height, 1fr))
        10px
        minmax(140px, auto);
}

.llw-metrics {
    grid-template-columns: minmax(120px, auto) minmax(120px, auto) minmax(420px, 1fr);
    align-items: center;
    gap: 6px;
}

.llw-command-panel {
    padding: 3px 6px;
}

.llw-command-panel .llw-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 9px;
}

.llw-metric-value {
    font-size: 1rem;
}

.llw-tool-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
}

.llw-tool-tabs {
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
}

.llw-tool-tab {
    padding: 4px 8px;
    white-space: nowrap;
}

.llw-ide-height-handle {
    z-index: 4;
    min-height: 8px;
    cursor: ns-resize;
    background: #334155;
}

.llw-ide-height-handle::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: #94a3b8;
    transform: translateX(-50%);
}

.llw-fullscreen-overlay .llw-ide-height-handle {
    display: none;
}

.llw-run-button,
.llw-code-tool[data-ide-theme="light"] .llw-run-button {
    border-color: #16a34a;
    color: #22c55e;
    background: transparent;
}

.llw-run-button:not(:disabled):hover,
.llw-run-button:focus-visible,
.llw-code-tool[data-ide-theme="light"] .llw-run-button:not(:disabled):hover {
    color: #15803d;
    background: #dcfce7;
    outline: 2px solid #4ade80;
    outline-offset: 1px;
}

.llw-stop-button,
.llw-code-tool[data-ide-theme="light"] .llw-stop-button {
    border-color: #dc2626;
    color: #ef4444;
    background: transparent;
}

.llw-stop-button:not(:disabled):hover,
.llw-stop-button:focus-visible,
.llw-code-tool[data-ide-theme="light"] .llw-stop-button:not(:disabled):hover {
    color: #b91c1c;
    background: #fee2e2;
    outline: 2px solid #f87171;
    outline-offset: 1px;
}

.llw-runtime-button:disabled {
    opacity: .42;
}

.llw-runtime-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.llw-runtime-indicator {
    max-width: 150px;
    overflow: hidden;
    color: #94a3b8;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-runtime-indicator.is-ready {
    color: #4ade80;
}

.llw-runtime-indicator.is-error,
.llw-runtime-indicator.is-missing {
    color: #fca5a5;
}

.llw-console-stderr {
    color: #fca5a5;
}

.llw-console-system {
    color: #93c5fd;
}

.llw-turtle-overlay {
    box-sizing: border-box;
    position: absolute;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: min(360px, 100%);
    min-height: min(260px, 100%);
    overflow: hidden;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: 0 12px 30px rgb(15 23 42 / 28%);
}

.llw-turtle-overlay.is-maximized {
    border-radius: 0;
}

.llw-turtle-overlay[hidden] {
    display: none;
}

.llw-turtle-overlay-header {
    position: relative;
    z-index: 6;
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px 5px 12px;
    border-bottom: 1px solid #cbd5e1;
    color: #e5edf8;
    background: #182235;
    cursor: move;
    touch-action: none;
    user-select: none;
}

.llw-turtle-overlay-title {
    overflow: hidden;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-turtle-overlay-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.llw-turtle-overlay-button,
.llw-turtle-overlay-close {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: #e5edf8;
    background: transparent;
    font: 20px/1 sans-serif;
    cursor: pointer;
}

.llw-turtle-overlay-button {
    font-size: 17px;
}

.llw-turtle-overlay-button:hover,
.llw-turtle-overlay-close:hover {
    background: rgb(148 163 184 / 20%);
}

.llw-turtle-overlay-button:focus-visible,
.llw-turtle-overlay-close:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

.llw-turtle-canvas-stage {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.llw-turtle-canvas-viewport {
    position: absolute;
    inset: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #fff;
}

.llw-turtle-scroll-surface {
    width: 1px;
    height: 1px;
    min-width: 1px;
    min-height: 1px;
    pointer-events: none;
}

.llw-runtime-canvas {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 1px;
    max-width: none;
    max-height: none;
    background: #fff;
    pointer-events: none;
}

.llw-turtle-resize-handles {
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
}

.llw-turtle-resize {
    position: absolute;
    display: block;
    touch-action: none;
    pointer-events: auto;
}

.llw-turtle-resize-n,
.llw-turtle-resize-s {
    right: 12px;
    left: 12px;
    height: 7px;
}

.llw-turtle-resize-n {
    top: 0;
    cursor: ns-resize;
}

.llw-turtle-resize-s {
    bottom: 0;
    cursor: ns-resize;
}

.llw-turtle-resize-e,
.llw-turtle-resize-w {
    top: 12px;
    bottom: 12px;
    width: 7px;
}

.llw-turtle-resize-e {
    right: 0;
    cursor: ew-resize;
}

.llw-turtle-resize-w {
    left: 0;
    cursor: ew-resize;
}

.llw-turtle-resize-ne,
.llw-turtle-resize-se,
.llw-turtle-resize-sw,
.llw-turtle-resize-nw {
    width: 13px;
    height: 13px;
}

.llw-turtle-resize-ne {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}

.llw-turtle-resize-se {
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
}

.llw-turtle-resize-sw {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
}

.llw-turtle-resize-nw {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.llw-turtle-overlay.is-maximized .llw-turtle-resize-handles {
    display: none;
}

.llw-turtle-badge {
    padding: 2px 7px;
    border-radius: 999px;
    color: #5b21b6;
    background: #ede9fe;
    font-size: .75rem;
}

@media (max-width: 760px) {
    .llw-workspace-stage,
    .llw-workspace-empty,
    .llw-workspace-content {
        min-height: calc(100vh - 100px);
    }

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

    .llw-tool-picker {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .llw-tool-tabs {
        flex-wrap: wrap;
    }
}

/* IDE chrome: compact toolbar, active tab, cursor metadata and floating find widget. */
.llw-code-tool > .llw-tool-heading {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
}

.llw-code-heading {
    flex: 0 0 auto;
}

.llw-code-actions {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

.llw-runtime-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.llw-runtime-actions .llw-runtime-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    font-size: 22px;
}

.llw-runtime-indicator {
    width: 9px;
    min-width: 9px;
    height: 9px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: #94a3b8;
}

.llw-runtime-indicator.is-ready,
.llw-runtime-indicator.is-running {
    background: #22c55e;
}

.llw-runtime-indicator.is-error,
.llw-runtime-indicator.is-missing {
    background: #ef4444;
}

.llw-runtime-indicator.is-loading,
.llw-runtime-indicator.is-stopping {
    background: #f59e0b;
}

.llw-file-tab.active::after,
.llw-code-tool[data-ide-theme="light"] .llw-file-tab.active::after {
    right: 2px;
    bottom: 0;
    left: 2px;
    height: 4px;
    border-radius: 3px 3px 0 0;
    background: #3b82f6;
}

.llw-code-pane {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}

.llw-code-search {
    position: absolute;
    z-index: 12;
    top: 8px;
    right: 14px;
    display: grid;
    width: clamp(360px, 44vw, 520px);
    max-width: calc(100% - 28px);
    padding: 7px;
    border: 1px solid #52627a;
    border-radius: 8px;
    background: #182338;
    box-shadow: 0 10px 28px rgb(0 0 0 / 32%);
}

.llw-search-row {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto auto auto auto;
    gap: 5px;
    align-items: center;
}

.llw-replace-row {
    grid-template-columns: minmax(120px, 1fr) auto auto;
    margin-top: 6px;
    padding-left: 33px;
}

.llw-code-search input {
    grid-column: auto;
    width: 100%;
    min-height: 30px;
    padding: 4px 7px;
}

.llw-code-search .llw-icon-button {
    min-height: 30px;
    padding: 4px 7px;
    white-space: nowrap;
}

.llw-code-search .llw-search-icon,
.llw-code-search .llw-search-close {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    padding: 0;
    place-items: center;
}

.llw-code-search .llw-search-count {
    min-width: 34px;
    text-align: right;
}

.llw-cursor-status {
    margin-left: auto;
    color: #94a3b8;
    font: 500 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.llw-code-tool[data-ide-theme="light"] .llw-code-search {
    border-color: #aebaca;
    background: #f8fafc;
    box-shadow: 0 10px 28px rgb(15 23 42 / 18%);
}

.llw-code-tool[data-ide-theme="light"] .llw-cursor-status {
    color: #64748b;
}

.llw-fullscreen-overlay > .llw-code-tool {
    grid-template-rows: auto minmax(0, 1fr);
}

.llw-fullscreen-overlay .llw-tool-heading {
    padding: 7px 12px;
}

.llw-workspace.has-fullscreen-ide .llw-condition-window {
    top: 82px !important;
    right: 10px !important;
}

.llw-fullscreen-overlay .llw-fullscreen-button {
    display: none;
}

.llw-fullscreen-close {
    position: static;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid #64748b;
    border-radius: 7px;
    color: #fff;
    background: #334155;
    cursor: pointer;
    order: 99;
}

.llw-code-tool[data-ide-theme="light"] .llw-fullscreen-close {
    color: #1f2937;
    border-color: #aebaca;
    background: #fff;
}

@media (max-width: 620px) {
    .llw-fullscreen-overlay .llw-tool-heading {
        padding: 7px 8px;
    }

    .llw-code-search {
        right: 8px;
        width: calc(100% - 16px);
        max-width: none;
    }
}

/* Web IDE polish: complete themes, compact runtime controls and autocomplete. */
.llw-code-tool[data-ide-theme="light"] .llw-ide-main,
.llw-code-tool[data-ide-theme="light"] .llw-ide-editor-column,
.llw-code-tool[data-ide-theme="light"] .llw-editor-workspace,
.llw-code-tool[data-ide-theme="light"] .llw-code-pane,
.llw-code-tool[data-ide-theme="light"] .llw-code-area {
    background: #fff;
}

.llw-runtime-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid #52627a;
    border-radius: 7px;
    background: #182235;
}

.llw-runtime-indicator {
    max-width: 120px;
    overflow: hidden;
    color: #94a3b8;
    font: 700 11px/1.2 inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-runtime-indicator.is-error {
    color: #fca5a5;
}

.llw-runtime-actions .llw-runtime-button {
    border: 0;
    border-radius: 5px;
    background: transparent;
    box-shadow: none;
    appearance: none;
}

.llw-runtime-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
}

.llw-code-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.llw-code-heading-copy {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.llw-runtime-actions .llw-runtime-button:hover:not(:disabled) {
    background: rgb(148 163 184 / 16%);
}

.llw-runtime-actions .llw-runtime-button:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

.llw-runtime-actions .llw-run-button {
    color: #65d48a;
}

.llw-runtime-actions .llw-stop-button {
    color: #fb7185;
}

.llw-runtime-actions .llw-runtime-button:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.llw-autocomplete {
    position: absolute;
    z-index: 8;
    width: min(220px, calc(100% - 16px));
    max-height: 164px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #52627a;
    border-radius: 7px;
    background: #182235;
    box-shadow: 0 10px 28px rgb(0 0 0 / 35%);
}

.llw-autocomplete-item {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 4px;
    color: #d8dee9;
    background: transparent;
    text-align: left;
    font: 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
    cursor: pointer;
}

.llw-autocomplete-item:hover,
.llw-autocomplete-item.active {
    color: #fff;
    background: #315fc5;
}

.llw-code-tool[data-ide-theme="light"] .llw-autocomplete {
    border-color: #aebaca;
    background: #fff;
    box-shadow: 0 10px 28px rgb(15 23 42 / 18%);
}

.llw-code-tool[data-ide-theme="light"] .llw-autocomplete-item {
    color: #1f2937;
}

.llw-code-tool[data-ide-theme="light"] .llw-autocomplete-item:hover,
.llw-code-tool[data-ide-theme="light"] .llw-autocomplete-item.active {
    color: #fff;
    background: #2563eb;
}

.llw-code-tool[data-ide-theme="light"] .llw-console-panel {
    background: #fff;
}

.llw-condition-window img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.llw-workspace * {
    box-sizing: border-box;
}

.llw-workspace [hidden] {
    display: none !important;
}

.llw-admin-preview-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.llw-panel-title {
    margin: 0;
}

.llw-panel-title {
    font-size: .96rem;
}

.llw-muted {
    margin: 5px 0 0;
    color: var(--llw-muted);
}

.llw-count {
    flex: 0 0 auto;
    border-radius: 999px;
    font-weight: 700;
}

.llw-learning-layout {
    --llw-navigation-width: 235px;
    display: grid;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(190px, var(--llw-navigation-width)) minmax(0, 1fr);
    gap: 14px;
    min-height: 610px;
}

.llw-learning-layout.is-navigation-collapsed {
    --llw-navigation-width: 76px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
}

.llw-navigation {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
}

.llw-navigation-toggle {
    justify-self: end;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--llw-border);
    border-radius: 8px;
    color: #315fc5;
    background: #fff;
    font: 700 20px/1 sans-serif;
    cursor: pointer;
}

.llw-navigation-toggle:focus-visible {
    outline: 2px solid #315fc5;
    outline-offset: 2px;
}

.llw-list-label-compact {
    display: none;
}

.is-navigation-collapsed .llw-navigation {
    width: 76px;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.is-navigation-collapsed .llw-navigation-section {
    display: block;
}

.is-navigation-collapsed .llw-navigation-toggle {
    position: relative;
    z-index: 2;
    justify-self: start;
}

.llw-navigation-section,
.llw-tools,
.llw-answer-panel,
.llw-metric {
    border: 1px solid var(--llw-border);
    border-radius: 12px;
    background: #fff;
}

.llw-navigation-section {
    min-width: 0;
    padding: 13px;
}

.llw-list {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-top: 10px;
}

.llw-list-button,
.llw-tool-tab,
.llw-icon-button,
.llw-primary-button,
.llw-secondary-button {
    border: 1px solid #b8c4d6;
    background: #fff;
    color: var(--llw-ink);
    cursor: pointer;
    font: inherit;
}

.llw-list-button {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    text-align: left;
}

.llw-theme-button {
    box-sizing: border-box;
    height: 52px;
    min-height: 52px;
}

.llw-list-button:hover,
.llw-list-button.active,
.llw-tool-tab:hover,
.llw-tool-tab.active {
    border-color: #315fc5;
    background: #edf2ff;
    color: #234da8;
}

.llw-count {
    min-width: 23px;
    padding: 2px 7px;
    background: #dce7ff;
    text-align: center;
}

.llw-task-button {
    justify-content: flex-start;
}

.llw-empty {
    margin: 0;
    color: var(--llw-muted);
    font-size: .9rem;
}

.llw-workspace-stage {
    position: relative;
    min-width: 0;
    min-height: 610px;
    overflow: hidden;
    border: 1px solid #cbd6e5;
    border-radius: 14px;
    background:
        linear-gradient(rgba(50, 86, 150, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 86, 150, .035) 1px, transparent 1px),
        #f8fbff;
    background-size: 28px 28px;
}

.llw-workspace-empty {
    display: grid;
    min-height: 610px;
    place-content: center;
    padding: 30px;
    text-align: center;
}

.llw-workspace-empty h3 {
    margin: 8px 0 0;
}

.llw-empty-mark {
    color: #315fc5;
    font-size: 2.5rem;
}

.llw-workspace-content {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.llw-metrics {
    display: grid;
    grid-template-columns: minmax(115px, .6fr) minmax(115px, .6fr) minmax(280px, 1.8fr);
    gap: 10px;
}

.llw-command-panel {
    padding: 10px;
    border: 1px solid var(--llw-border);
    border-radius: 12px;
    background: #fff;
}

.llw-command-panel .llw-metric {
    border: 0;
    border-radius: 0;
    border-right: 1px solid var(--llw-border);
    padding: 4px 12px;
}

.llw-tool-picker {
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 8px;
}

.llw-tools {
    min-height: 410px;
}

.llw-condition-inline {
    display: grid;
    min-height: 410px;
    place-content: center;
    gap: 12px;
    text-align: center;
}

.llw-condition-inline-empty {
    margin: 0;
    color: var(--llw-muted);
}

.llw-metric {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
}

.llw-metric-label {
    color: var(--llw-muted);
    font-size: .85rem;
    font-weight: 700;
}

.llw-metric-value {
    font-size: 1.28rem;
}

.llw-metric small {
    color: var(--llw-muted);
}

.llw-tools,
.llw-answer-panel {
    padding: 13px;
}

.llw-section-heading,
.llw-tool-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
}

.llw-heading-copy {
    font-weight: 800;
}

.llw-tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0;
}

.llw-tool-tab {
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 700;
}

.llw-tool-host {
    min-height: 240px;
}

.llw-tool-panel {
    height: 100%;
    min-height: 240px;
    overflow: hidden;
    border: 1px solid #cbd6e5;
    border-radius: 10px;
    background: #fff;
}

.llw-tool-panel > .llw-tool-heading {
    padding: 9px 12px;
    border-bottom: 1px solid #d8e1ee;
}

.llw-code-heading,
.llw-code-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.llw-code-heading {
    min-width: 0;
}

.llw-code-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.llw-font-size-value,
.llw-search-count {
    color: var(--llw-muted);
    font-size: .78rem;
    font-weight: 500;
}

.llw-code-search {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto auto auto minmax(110px, 1fr) auto auto auto;
    gap: 6px;
    align-items: center;
    padding: 7px 9px;
    border-bottom: 1px solid #29364b;
    background: #182338;
}

.llw-code-search input {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #52627a;
    border-radius: 6px;
    outline: none;
    background: #0f1726;
    color: #fff;
    font: inherit;
}

.llw-code-search input:focus {
    border-color: #7aa2ff;
}

.llw-code-search .llw-icon-button {
    border-color: #52627a;
    background: #202e47;
    color: #e9eef8;
}

.llw-code-search .llw-search-count {
    min-width: 74px;
    color: #aebbd0;
    text-align: center;
}

.llw-editor-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: 210px;
    background: #101827;
}

.llw-line-numbers,
.llw-highlight,
.llw-editor {
    box-sizing: border-box;
    margin: 0;
    padding: 13px 12px;
    border: 0;
    font: var(--llw-code-font-size, 13px)/1.6 Consolas, "Courier New", monospace;
    white-space: pre;
    tab-size: 4;
}

.llw-line-numbers {
    min-width: 44px;
    overflow: hidden;
    border-right: 1px solid #29364b;
    background: #131d2c;
    color: #718097;
    text-align: right;
    user-select: none;
}

.llw-code-area {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.llw-highlight,
.llw-editor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.llw-highlight,
.llw-editor {
    padding-left: 0;
}

.llw-highlight {
    pointer-events: none;
    color: #a9b7c6;
}

/* Keep the final empty line's font box without a padding/source character. */
.llw-code-empty-line::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
}

.llw-editor {
    -yandex-copysearch: none;
    resize: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: #fff;
    -webkit-text-fill-color: transparent;
}

.llw-highlight.is-wrapped,
.llw-editor.is-wrapped {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.llw-editor::selection {
    background: rgba(94, 142, 255, .42);
}

/* Static diagnostics marks read the existing highlight's Range geometry, without adding
   source characters or competing with native input, selection or remote caret. */
.llw-code-diagnostic-layer {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.llw-code-diagnostic-mark {
    position: absolute;
    height: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 2Q2 0 4 2T8 2' fill='none' stroke='%23ff6b6b' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: left bottom;
}

.llw-code-diagnostic-mark[data-severity="warning"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4'%3E%3Cpath d='M0 2Q2 0 4 2T8 2' fill='none' stroke='%23ffbe46' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Exact diagnostic ranges override syntax foreground only. Keep selection backgrounds
   and the independent red/amber wave layer intact. Neutral local dark-editor color. */
.llw-highlight::highlight(llw-code-diagnostic-muted) {
    color: #999;
}

.llw-code-diagnostic-mark[data-presentation="muted"] {
    background-image: none;
}

.llw-code-diagnostic-message {
    grid-row: 3;
    padding: 5px 12px;
    color: inherit;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.llw-code-diagnostic-message[hidden] { display: none; }
.llw-code-diagnostic-message[data-status="syntax_error"] { color: #ff6b6b; }
.llw-code-diagnostic-message:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* Visual-only mouse presence; the arrow's tip is the document point. */
.llw-remote-code-pointer, .lge-remote-pointer {
    position: absolute;
    width: 32px;
    height: 22px;
    pointer-events: none;
    user-select: none;
    z-index: 8;
    color: #8dd5ed;
    filter: drop-shadow(0 1px 1px #101827);
}
.llw-remote-pointer-arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 18px;
    fill: currentColor;
    stroke: #101827;
    stroke-width: 1;
    pointer-events: none;
}
.llw-remote-pointer-role {
    position: absolute;
    left: 15px;
    top: 3px;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.llw-remote-pointer-role[data-role="teacher"] { color: #c4b5fd; }

.llw-token-keyword {
    color: #cc7832;
}

.llw-token-string {
    color: #6a8759;
}

.llw-token-number {
    color: #6897bb;
}

.llw-token-comment {
    color: #808080;
}

.llw-token-declaration,
.llw-token-call {
    color: #ffc66d;
}

.llw-token-builtin {
    color: #8888c6;
}

.llw-code-status {
    min-height: 27px;
    padding: 5px 10px;
    border-top: 1px solid #29364b;
    background: #131d2c;
    color: #aebbd0;
    font-size: .78rem;
    text-align: right;
}

.llw-copy-fallback {
    position: fixed;
    left: -9999px;
    opacity: 0;
}

.llw-text-editor {
    display: block;
    width: 100%;
    min-height: 195px;
    padding: 12px;
    resize: vertical;
    border: 0;
    outline: none;
    font: inherit;
    line-height: 1.55;
}

.llw-table-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(55px, 1fr));
    gap: 1px;
    padding: 14px;
    background: #d7e0ec;
}

.llw-table-grid input {
    min-width: 0;
    height: 46px;
    padding: 7px;
    border: 0;
    outline: none;
    background: #fff;
}

.llw-table-grid input:focus {
    box-shadow: inset 0 0 0 2px #315fc5;
}

.llw-canvas-placeholder {
    display: grid;
    place-content: center;
    padding: 25px;
    background: #f6f8fc;
    text-align: center;
}

.llw-canvas-mark {
    margin-bottom: 6px;
    color: #8c5ac4;
    font-size: 2rem;
}

.llw-answer-panel {
    display: grid;
    gap: 10px;
}

.llw-answer-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    gap: 8px;
}

.llw-answer-row input,
.llw-answer-row textarea {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #b8c4d6;
    border-radius: 8px;
    font: inherit;
}

.llw-answer-row textarea {
    min-height: 40px;
    max-height: 140px;
    resize: vertical;
}

.llw-answer-status {
    min-height: 1.2em;
    color: var(--llw-muted);
    font-size: .82rem;
}

.llw-primary-button,
.llw-secondary-button,
.llw-icon-button {
    border-radius: 8px;
}

.llw-primary-button,
.llw-secondary-button {
    padding: 8px 11px;
    font-weight: 700;
}

.llw-primary-button {
    border-color: #315fc5;
    background: #315fc5;
    color: #fff;
}

.llw-secondary-button:hover,
.llw-icon-button:hover {
    background: #edf2ff;
}

.llw-condition-window {
    position: fixed;
    z-index: 50;
    top: 22px;
    left: 22px;
    width: min(430px, calc(100% - 44px));
    min-width: 270px;
    min-height: 180px;
    max-width: calc(100% - 8px);
    max-height: calc(100vh - 16px);
    overflow: auto;
    resize: both;
    border: 1px solid #9cafcc;
    border-radius: 12px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 40px rgba(41, 58, 91, .2);
}

.llw-condition-window.is-pinned {
    border-color: #315fc5;
}

.llw-condition-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #d8e1ee;
    background: #edf2ff;
    cursor: grab;
    touch-action: none;
}

.llw-condition-window.is-pinned .llw-condition-header {
    cursor: default;
}

.llw-condition-actions,
.llw-condition-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.llw-icon-button {
    padding: 5px 8px;
    font-size: .78rem;
}

.llw-condition-body {
    padding: 12px;
    line-height: 1.45;
}

.llw-condition-window.is-minimized {
    min-height: 0;
    height: auto !important;
    resize: none;
}

.llw-condition-window.is-minimized .llw-condition-body {
    display: none;
}

.llw-condition-warning {
    margin: 0 0 8px;
    color: #8b5a00;
    font-size: .82rem;
    font-weight: 800;
}

.llw-condition-prompt {
    margin: 0 0 10px;
}

.llw-condition-image {
    display: grid;
    min-height: 86px;
    place-content: center;
    gap: 5px;
    margin-bottom: 10px;
    border: 1px dashed #aab8cd;
    border-radius: 8px;
    background: #f7f9fc;
    color: #6b7890;
    text-align: center;
}

.llw-condition-image-mark {
    color: #315fc5;
    font-size: 1.35rem;
    font-weight: 900;
}

.llw-condition-controls {
    flex-wrap: wrap;
    padding-top: 9px;
    border-top: 1px solid #e2e8f1;
}

.llw-condition-value {
    min-width: 40px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
}

@media (max-width: 820px) {
    .llw-learning-layout {
        grid-template-columns: 1fr;
    }

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

    .llw-workspace-stage {
        min-height: 650px;
    }
}

/* Keep Code/Graphics usable in the synthetic stand: one compact command row. */
.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel {
    grid-template-columns:
        minmax(116px, auto)
        minmax(116px, auto)
        minmax(420px, 1fr)
        auto;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    padding: 3px 5px;
    overflow-x: auto;
    overflow-y: hidden;
}

.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-tool-picker,
.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-condition-restore {
    grid-column: auto;
}

.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-tool-picker {
    height: 100%;
    padding: 0 3px;
}

.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-tool-tab {
    height: 44px;
    min-height: 44px;
}

/* Explicit local-only synthetic state used for Step 3 visual verification. */
.llw-synthetic-preview-banner {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #1d9bd1;
    border-radius: 12px;
    color: #e8f8ff;
    background: linear-gradient(90deg, #073047, #10243a 58%, #17213a);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.llw-synthetic-preview-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.llw-synthetic-preview-title {
    color: #67e8f9;
    font: 800 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .09em;
}

.llw-synthetic-preview-student,
.llw-synthetic-preview-mode {
    color: #c8d9e8;
    font-size: 11px;
}

.llw-synthetic-preview-mode {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid #42627e;
    border-radius: 999px;
    color: #f1f7ff;
    background: rgb(7 20 37 / 66%);
}

@media (max-width: 720px) {
    .llw-synthetic-preview-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .llw-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .llw-navigation,
    .llw-metrics {
        grid-template-columns: 1fr;
    }

    .llw-workspace-content {
        padding: 12px;
    }

    .llw-answer-row {
        grid-template-columns: 1fr;
    }

    .llw-answer-row button {
        width: 100%;
    }

    .llw-condition-window {
        width: calc(100% - 24px);
        min-width: 0;
    }

    .llw-tool-panel:not(.llw-code-tool) > .llw-tool-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .llw-code-search {
        grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    }

    .llw-code-search .llw-search-count {
        min-width: 0;
    }

    .llw-code-search input {
        grid-column: span 4;
        width: 100%;
    }

    .llw-search-close {
        grid-column: 4;
        grid-row: 2;
    }
}

/* Stage 0.2: tab lifecycle, Console split and IDE-local themes. */
.llw-editor-workspace {
    --llw-console-height: 190px;
    display: grid;
    grid-template-rows: minmax(180px, 1fr) 10px var(--llw-console-height);
    min-height: 430px;
    overflow: hidden;
}

.llw-ide-bottom-layout {
    --llw-answer-width: clamp(280px, 25%, 460px);
    display: grid;
    grid-template-columns: minmax(0, var(--llw-answer-width)) 8px minmax(0, 1fr);
    min-width: 0;
    min-height: 90px;
    overflow: hidden;
    background: #0f172a;
}

.llw-ide-bottom-layout > .llw-answer-panel,
.llw-ide-bottom-layout > .llw-console-panel {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.llw-ide-bottom-layout > .llw-answer-panel {
    align-content: start;
    border: 0;
    border-right: 1px solid #334155;
    color: #e5edf8;
    background: #111b2d;
}

.llw-answer-console-splitter {
    position: relative;
    z-index: 2;
    width: 8px;
    min-width: 8px;
    cursor: col-resize;
    touch-action: none;
    background: #334155;
}

.llw-answer-console-splitter::after {
    content: "";
    position: absolute;
    inset: 0 2px;
    background: #64748b;
}

.llw-answer-console-splitter:hover,
.llw-answer-console-splitter:focus-visible,
.llw-answer-console-splitter.is-dragging {
    background: #1d4ed8;
}

.llw-answer-console-splitter:hover::after,
.llw-answer-console-splitter:focus-visible::after,
.llw-answer-console-splitter.is-dragging::after {
    background: #93c5fd;
}

.llw-answer-console-splitter:focus-visible {
    outline: 2px solid #bfdbfe;
    outline-offset: -2px;
}

.llw-ide-bottom-layout .llw-answer-row textarea {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 100%;
}

@media (max-width: 1100px) {
    .llw-ide-bottom-layout {
        --llw-answer-width: 45%;
    }
}

@media (max-width: 900px) {
    .llw-ide-bottom-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 0 minmax(140px, 1fr);
        min-height: 230px;
        overflow: auto;
    }

    .llw-ide-bottom-layout > .llw-answer-panel {
        border-right: 0;
        border-bottom: 1px solid #334155;
    }

    .llw-answer-console-splitter {
        display: none;
    }

    .llw-ide-bottom-layout > .llw-console-panel {
        min-height: 140px;
        max-height: 210px;
    }
}

/* Local-only visual comparison layer. The shared Workspace DOM and editors stay intact. */
.llw-ui-devbar {
    position: relative;
    z-index: 90;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid #263244;
    border-radius: 14px;
    color: #dce7f5;
    background: #101722;
    box-shadow: 0 10px 28px rgb(11 18 32 / 18%);
}

.llw-ui-devbar-intro {
    display: grid;
    flex: 0 0 auto;
    gap: 1px;
    padding: 0 8px 0 3px;
    border-right: 1px solid #334155;
}

.llw-ui-devbar-title {
    color: #f8fafc;
    font: 800 12px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.llw-ui-devbar-note {
    color: #8fa1b8;
    font-size: 10px;
}

.llw-ui-choice-group {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.llw-ui-choice,
.llw-motion-choice {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid #3a485d;
    border-radius: 10px;
    color: #b8c6d9;
    background: #182232;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
}

.llw-motion-choice {
    min-width: 58px;
    padding-inline: 9px;
    font-size: 11px;
}

.llw-ui-choice:hover,
.llw-motion-choice:hover {
    border-color: #71839c;
    color: #fff;
}

.llw-ui-choice:focus-visible,
.llw-motion-choice:focus-visible,
.llw-workspace[data-learning-ui] :is(button, textarea, input, select):focus-visible {
    outline: 3px solid #f5c451;
    outline-offset: 2px;
}

.llw-ui-choice[aria-pressed="true"],
.llw-motion-choice[aria-pressed="true"] {
    border-color: #78d7ff;
    color: #fff;
    background: #23364d;
    box-shadow: inset 0 -3px 0 #78d7ff;
}

.llw-ui-choice-mark {
    display: none;
    width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 50%;
    color: #07131d;
    background: #78d7ff;
    font-size: 11px;
}

.llw-ui-choice[aria-pressed="true"] .llw-ui-choice-mark {
    display: inline-grid;
}

.llw-motion-choice[aria-pressed="true"]::before {
    content: "✓";
    font-size: 10px;
}

.llw-motion-choice-group {
    margin-left: auto;
    padding-left: 9px;
    border-left: 1px solid #334155;
}

.llw-tool-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
}

.llw-tool-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.llw-tool-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    text-align: left;
}

.llw-tool-name,
.llw-tool-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-tool-name {
    font-size: 12px;
}

.llw-tool-hint {
    color: currentColor;
    font-size: 9px;
    font-weight: 600;
    opacity: .68;
}

.llw-tool-active-mark {
    display: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    color: #07131d;
    background: #86efac;
    font-size: 11px;
}

.llw-tool-tab[aria-pressed="true"] .llw-tool-active-mark {
    display: inline-grid;
}

.llw-tool-tab[aria-disabled="true"] {
    cursor: not-allowed;
}

.llw-office-status {
    margin: 0;
    color: #718096;
    font-size: 10px;
    line-height: 1.25;
}

.llw-workspace[data-learning-ui="legacy"] .llw-tool-tab-icon .llw-tool-copy,
.llw-workspace[data-learning-ui="legacy"] .llw-tool-active-mark {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.llw-workspace[data-learning-ui="legacy"] .llw-office-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Shared material and accessibility contract for the three proposed variants. */
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) {
    --llw-border: #34445a;
    --llw-ink: #ecf4ff;
    --llw-muted: #9cafc4;
    min-width: 0;
    max-width: 100%;
    gap: 9px;
    color: var(--llw-ink);
    color-scheme: dark;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-learning-layout {
    min-width: 0;
    max-width: 100%;
    gap: 9px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) :is(.llw-navigation-section, .llw-command-panel, .llw-metric, .llw-tools, .llw-answer-panel) {
    border-color: var(--llw-border);
    color: var(--llw-ink);
    background: #111a28;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) :is(.llw-list-button, .llw-tool-tab, .llw-secondary-button, .llw-icon-button, .llw-navigation-toggle) {
    border-color: #45576f;
    color: #dae6f4;
    background: #182437;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) :is(
    .llw-navigation-toggle,
    .llw-list-button,
    .llw-tool-tab,
    .llw-primary-button,
    .llw-secondary-button,
    .llw-icon-button,
    .llw-condition-nav,
    .llw-fullscreen-button
) {
    min-height: 44px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) :is(.llw-navigation-toggle, .llw-task-button, .llw-icon-button, .llw-condition-nav) {
    min-width: 44px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-list-button[aria-pressed="true"]::after {
    content: "✓";
    flex: 0 0 auto;
    font-weight: 900;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-workspace-stage {
    min-width: 0;
    border-color: var(--llw-border);
    overflow: hidden;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-workspace-content {
    min-width: 0;
    gap: 9px;
    padding: 10px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-host {
    position: relative;
    overflow: hidden;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-command-panel {
    height: auto;
    min-height: 64px;
    max-height: none;
    overflow: visible;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-command-panel .llw-tool-picker {
    display: grid;
    height: auto;
    min-width: 0;
    align-content: center;
    gap: 4px;
    padding: 5px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tabs {
    display: flex;
    min-width: 0;
    gap: 5px;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab {
    position: relative;
    display: inline-flex;
    width: auto;
    min-width: max-content;
    min-height: 52px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 10px;
    white-space: nowrap;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab[aria-disabled="true"] {
    border-style: dashed;
    opacity: .7;
    filter: saturate(.45);
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-answer-row textarea {
    min-height: 48px;
    border-color: #50627a;
    color: #f4f8ff;
    background: #0b1320;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-condition-embedded {
    border-color: var(--llw-border);
    color: var(--llw-ink);
    background: #0b1320;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-condition-embedded-header {
    border-color: var(--llw-border);
    background: #182437;
}

.llw-fullscreen-overlay:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) {
    border-color: #3e536d;
    background: #080e17;
    box-shadow: 0 28px 100px rgb(0 0 0 / 72%);
}

.llw-fullscreen-overlay:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) > .llw-answer-panel {
    border-color: #3e536d;
    color: #ecf4ff;
    background: #111a28;
}

/* Graphite Focus: compact left rail, quiet hierarchy, broad uninterrupted work surface. */
.llw-workspace[data-learning-ui="graphite-focus"] {
    --llw-border: #354254;
    --llw-graphite-key: #202b39;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-ui-devbar {
    border-color: #303d4e;
    background: #10161e;
    box-shadow: 0 8px 22px rgb(3 7 12 / 22%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-learning-layout {
    --llw-navigation-width: 214px;
    grid-template-columns: minmax(184px, var(--llw-navigation-width)) minmax(0, 1fr);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-navigation {
    gap: 4px;
    padding: 7px;
    border: 1px solid #303d4e;
    border-radius: 16px;
    background: #0e141c;
    box-shadow: inset -1px 0 0 rgb(255 255 255 / 3%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-navigation-section {
    padding: 9px;
    border: 0;
    border-top: 1px solid #2c3848;
    border-radius: 0;
    background: transparent;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-list-button {
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-list-button:hover,
.llw-workspace[data-learning-ui="graphite-focus"] .llw-list-button[aria-pressed="true"] {
    border-color: #526176;
    background: #1b2634;
    box-shadow: inset 3px 0 0 #9cb7d3;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-workspace-stage {
    border-radius: 16px;
    background: #0a1017;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-metrics {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
    padding: 4px 5px;
    border-radius: 12px;
    background: #101822;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-command-panel .llw-tool-picker,
.llw-workspace[data-learning-ui="graphite-focus"] .llw-command-panel .llw-condition-restore {
    grid-column: 1 / -1;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-command-panel .llw-metric {
    padding-inline: 10px;
    border-right: 1px solid #2c3949;
    background: transparent;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tool-hint {
    display: none;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-office-status {
    color: #93a4b9;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tool-tab {
    min-height: 48px;
    border-color: #3b495b;
    background: linear-gradient(#273342, #1a2431);
    box-shadow: 0 3px 0 #080d13, inset 0 1px 0 rgb(255 255 255 / 6%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tool-tab:hover {
    border-color: #73859b;
    transform: translateY(-1px);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tool-tab[aria-pressed="true"] {
    border-color: #b8c7d8;
    color: #fff;
    background: #2d3b4c;
    box-shadow: 0 1px 0 #080d13, inset 0 -3px 0 #b8c7d8;
    transform: translateY(2px);
}

.llw-workspace[data-learning-ui="graphite-focus"] :is(.llw-tools, .llw-answer-panel) {
    border-radius: 13px;
    background: #101822;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tools {
    padding: 8px;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-answer-panel {
    padding: 9px 11px;
}

.llw-workspace[data-learning-ui="graphite-focus"].is-learning-ui-transitioning[data-learning-ui-transition="graphite-focus"] .llw-workspace-stage::after,
.llw-workspace[data-learning-ui="graphite-focus"].is-learning-tool-transitioning[data-learning-tool-transition="graphite-focus"] .llw-tool-host::after {
    position: absolute;
    z-index: 80;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, transparent 0 44%, rgb(201 224 246 / 10%) 49%, transparent 54%);
    animation: llw-graphite-surface-scan 360ms ease-out both;
}

@keyframes llw-graphite-surface-scan {
    from { transform: translateY(-55%); opacity: 0; }
    28% { opacity: 1; }
    to { transform: translateY(55%); opacity: 0; }
}

/* Luminous Deck: navigation becomes a top device deck; work and answer are separate light wells. */
.llw-workspace[data-learning-ui="luminous-deck"] {
    --llw-border: #244866;
    --llw-luminous-cyan: #45dcff;
    --llw-luminous-violet: #9e7bff;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-ui-devbar {
    border-color: #285777;
    background: linear-gradient(180deg, #10263a, #091520);
    box-shadow: inset 0 1px 0 rgb(117 224 255 / 12%), 0 12px 32px rgb(0 25 46 / 32%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-learning-layout,
.llw-workspace[data-learning-ui="luminous-deck"] .llw-learning-layout.is-navigation-collapsed {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-navigation {
    position: relative;
    display: block;
    min-width: 0;
    padding: 8px 44px 8px 9px;
    overflow: hidden;
    border: 1px solid #285777;
    border-radius: 17px;
    background:
        linear-gradient(90deg, rgb(69 220 255 / 8%), transparent 24%, rgb(158 123 255 / 7%)),
        #0a1723;
    box-shadow: inset 0 1px 0 rgb(117 224 255 / 10%), 0 9px 30px rgb(0 20 38 / 25%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-navigation-toggle {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-navigation-section {
    padding: 0;
    border: 0;
    background: transparent;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-navigation-section > .llw-panel-title {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 9px;
    color: #8edff5;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-theme-list {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 7px;
    margin-top: 3px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-theme-list > .llw-list-button {
    width: 190px;
    height: 64px;
    flex: 0 0 190px;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-task-navigation-section {
    display: grid;
    min-width: 270px;
    flex: 1 0 300px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    height: 64px;
    padding-left: 8px;
    border-left: 1px solid #285777;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-task-grid {
    display: flex;
    min-width: 0;
    gap: 5px;
    margin: 0;
    overflow-x: auto;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-task-button {
    width: 48px;
    flex: 0 0 48px;
    justify-content: center;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-list-button {
    border-color: #2b5673;
    color: #c8e9f4;
    background: #10263a;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-list-button[aria-pressed="true"] {
    border-color: var(--llw-luminous-cyan);
    color: #fff;
    background: #153b54;
    box-shadow: inset 0 -3px 0 var(--llw-luminous-cyan), 0 0 16px rgb(69 220 255 / 16%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-workspace-stage {
    border-color: #244866;
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 0, rgb(111 74 255 / 9%), transparent 34%),
        radial-gradient(circle at 0 72%, rgb(32 198 255 / 7%), transparent 28%),
        #07111c;
    box-shadow: inset 0 1px 0 rgb(117 224 255 / 8%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-metrics {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    padding: 6px;
    border-radius: 15px;
    background: linear-gradient(180deg, #10283c, #0b1927);
    box-shadow: inset 0 1px 0 rgb(132 230 255 / 12%), 0 8px 24px rgb(0 15 29 / 28%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-command-panel .llw-tool-picker,
.llw-workspace[data-learning-ui="luminous-deck"] .llw-command-panel .llw-condition-restore {
    grid-column: 1 / -1;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-metric-value {
    color: #d9f7ff;
    text-shadow: 0 0 12px rgb(69 220 255 / 30%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tool-tab {
    border-color: #2f5b78;
    background: linear-gradient(180deg, #173c55, #10263a);
    box-shadow: inset 0 1px 0 rgb(130 228 255 / 12%), 0 4px 12px rgb(0 13 24 / 28%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tool-tab[aria-pressed="true"] {
    border-color: var(--llw-luminous-cyan);
    color: #fff;
    background: linear-gradient(180deg, #205878, #14374e);
    box-shadow: inset 0 -3px 0 var(--llw-luminous-cyan), 0 0 18px rgb(69 220 255 / 24%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tools {
    padding: 9px;
    border-color: #285777;
    border-radius: 16px;
    background: #0b1826;
    box-shadow: inset 0 1px 0 rgb(117 224 255 / 7%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-condition-embedded {
    border-color: #2d6383;
    box-shadow: inset 0 0 28px rgb(31 191 240 / 5%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-answer-panel {
    border-color: #563f81;
    border-radius: 14px;
    background: linear-gradient(90deg, #15182d, #101a2d);
    box-shadow: inset 3px 0 0 var(--llw-luminous-violet);
}

.llw-workspace[data-learning-ui="luminous-deck"].is-learning-ui-transitioning[data-learning-ui-transition="luminous-deck"] .llw-workspace-stage::before,
.llw-workspace[data-learning-ui="luminous-deck"].is-learning-tool-transitioning[data-learning-tool-transition="luminous-deck"] .llw-tool-host::before {
    position: absolute;
    z-index: 80;
    inset: -18px;
    border: 20px solid rgb(75 218 255 / 20%);
    pointer-events: none;
    filter: blur(13px);
    content: "";
    animation: llw-luminous-boundary-assembly 360ms ease-out both;
}

@keyframes llw-luminous-boundary-assembly {
    from { transform: scale(.96); opacity: 0; }
    48% { opacity: .9; }
    to { transform: scale(1); opacity: 0; }
}

/* Spatial Arena: far navigation, middle task plane, near tool plane and semantic answer dock. */
.llw-workspace[data-learning-ui="spatial-arena"] {
    --llw-border: #3d4567;
    --llw-spatial-blue: #6aa8ff;
    --llw-spatial-amber: #ffc766;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-ui-devbar {
    border-color: #454c70;
    background: #101326;
    box-shadow: 0 14px 32px rgb(2 4 16 / 35%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-learning-layout {
    --llw-navigation-width: 176px;
    grid-template-columns: minmax(156px, var(--llw-navigation-width)) minmax(0, 1fr);
    gap: 14px;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-navigation {
    gap: 8px;
    padding: 8px;
    border: 1px solid #303653;
    border-radius: 18px;
    background: #090c18;
    box-shadow: inset -8px 0 20px rgb(0 0 0 / 32%), 0 5px 12px rgb(0 0 0 / 22%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-navigation-section {
    padding: 9px;
    border-color: #303653;
    background: #0e1222;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-list-button {
    border-color: #343c5c;
    background: #12172a;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-list-button[aria-pressed="true"] {
    border-color: var(--llw-spatial-amber);
    color: #fff7e7;
    background: #2d2530;
    box-shadow: inset 4px 0 0 var(--llw-spatial-amber);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-stage {
    border-color: #414a70;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgb(82 101 165 / 8%), transparent 38%),
        #090d19;
    box-shadow: 0 13px 34px rgb(0 0 0 / 35%), inset 0 1px 0 rgb(255 255 255 / 4%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-metrics {
    grid-template-columns: repeat(2, minmax(126px, 1fr));
    border-radius: 13px;
    background: #11162a;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-command-panel .llw-tool-picker,
.llw-workspace[data-learning-ui="spatial-arena"] .llw-command-panel .llw-condition-restore {
    grid-column: 1 / -1;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tab {
    border-color: #475079;
    border-radius: 4px 13px 4px 13px;
    background: #171d34;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tab[aria-pressed="true"] {
    border-color: var(--llw-spatial-blue);
    color: #fff;
    background: #253558;
    box-shadow: inset 0 -4px 0 var(--llw-spatial-blue);
    transform: translateY(-3px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tools {
    position: relative;
    z-index: 8;
    min-height: 440px;
    padding: 8px;
    border-color: #53618e;
    border-radius: 18px;
    background: #0e1426;
    box-shadow: 0 18px 42px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(126 171 255 / 8%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-host {
    position: relative;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-answer-panel {
    position: sticky;
    z-index: 15;
    bottom: 7px;
    border-color: #8e6b38;
    border-radius: 14px;
    background: #1c1820;
    box-shadow: 0 15px 34px rgb(0 0 0 / 45%), inset 4px 0 0 var(--llw-spatial-amber);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-answer-heading .llw-panel-title::before {
    content: "Финальный ";
    color: var(--llw-spatial-amber);
}

.llw-workspace[data-learning-ui="spatial-arena"].is-learning-ui-transitioning[data-learning-ui-transition="spatial-arena"] .llw-tool-host::before,
.llw-workspace[data-learning-ui="spatial-arena"].is-learning-tool-transitioning[data-learning-tool-transition="spatial-arena"] .llw-tool-host::before {
    position: absolute;
    z-index: 70;
    inset: 8% 6%;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(90deg, transparent 0 12%, rgb(106 168 255 / 30%) 12% 14%, transparent 14% 48%, rgb(255 199 102 / 25%) 48% 50%, transparent 50%),
        linear-gradient(0deg, transparent 0 25%, rgb(106 168 255 / 20%) 25% 28%, transparent 28% 68%, rgb(255 199 102 / 18%) 68% 71%, transparent 71%);
    animation: llw-spatial-local-replacement 360ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes llw-spatial-local-replacement {
    from { transform: scale(.88); opacity: 0; clip-path: inset(48% 0); }
    45% { opacity: 1; }
    to { transform: scale(1); opacity: 0; clip-path: inset(0); }
}

.llw-workspace[data-learning-motion="low"] .llw-workspace-stage::before,
.llw-workspace[data-learning-motion="low"] .llw-workspace-stage::after,
.llw-workspace[data-learning-motion="low"] .llw-tool-host::before,
.llw-workspace[data-learning-motion="low"] .llw-tool-host::after {
    animation-duration: 180ms !important;
}

.llw-workspace[data-learning-motion="reduced"] *,
.llw-fullscreen-overlay[data-learning-motion="reduced"] * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
}

.llw-workspace[data-learning-motion="reduced"] :is(.llw-workspace-stage, .llw-tool-host)::before,
.llw-workspace[data-learning-motion="reduced"] :is(.llw-workspace-stage, .llw-tool-host)::after {
    display: none !important;
    content: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .llw-workspace *,
    .llw-fullscreen-overlay * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }

    .llw-workspace :is(.llw-workspace-stage, .llw-tool-host)::before,
    .llw-workspace :is(.llw-workspace-stage, .llw-tool-host)::after {
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 1100px) {
    .llw-ui-devbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .llw-ui-devbar-intro {
        min-width: 116px;
    }

    .llw-motion-choice-group {
        margin-left: 0;
    }

    .llw-workspace[data-learning-ui="graphite-focus"] .llw-learning-layout,
    .llw-workspace[data-learning-ui="spatial-arena"] .llw-learning-layout {
        --llw-navigation-width: 184px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-metrics {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-command-panel .llw-tool-picker {
        grid-column: 1 / -1;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-command-panel .llw-condition-restore {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-learning-layout,
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-learning-layout.is-navigation-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 7px;
        overflow-x: auto;
        transform: none;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation-section {
        min-width: min(78vw, 330px);
        flex: 0 0 min(78vw, 330px);
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tools,
    .llw-workspace[data-learning-ui="spatial-arena"] .llw-answer-panel {
        transform: none;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation {
        position: relative;
        display: block;
        max-height: 218px;
        padding-right: 42px;
        overflow: hidden;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation-toggle {
        position: absolute;
        z-index: 4;
        top: 7px;
        right: 7px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation-section {
        width: 100%;
        min-width: 0;
        padding: 7px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-theme-list {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-theme-list > .llw-list-button {
        width: 154px;
        min-width: 154px;
        flex: 0 0 154px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-task-navigation-section {
        display: grid;
        width: 205px;
        min-width: 205px;
        flex: 0 0 205px;
        grid-template-rows: auto 1fr;
        max-height: 150px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-task-grid {
        display: flex;
        min-width: 0;
        gap: 5px;
        margin-top: 5px;
        overflow-x: auto;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-task-button {
        width: 48px;
        min-width: 48px;
        flex: 0 0 48px;
        justify-content: center;
    }
}

@media (max-width: 620px) {
    .llw-workspace[data-learning-ui] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: clip;
    }

    .llw-ui-devbar {
        display: grid;
        width: 100%;
        gap: 6px;
        padding: 6px;
        overflow: hidden;
        border-radius: 11px;
    }

    .llw-ui-devbar-intro {
        display: flex;
        align-items: baseline;
        gap: 7px;
        padding: 3px 5px;
        border: 0;
    }

    .llw-ui-choice-group {
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .llw-motion-choice-group {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .llw-ui-choice,
    .llw-motion-choice {
        flex: 0 0 auto;
    }

    .llw-workspace[data-learning-ui="legacy"] .llw-learning-layout,
    .llw-workspace[data-learning-ui="legacy"] .llw-learning-layout.is-navigation-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .llw-workspace[data-learning-ui="legacy"] .llw-navigation {
        display: flex;
        min-width: 0;
        overflow-x: auto;
    }

    .llw-workspace[data-learning-ui="legacy"] .llw-navigation-section {
        min-width: min(82vw, 320px);
        flex: 0 0 min(82vw, 320px);
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-learning-layout,
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-learning-layout.is-navigation-collapsed {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-navigation {
        padding-right: 44px;
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-theme-list > .llw-list-button {
        width: 160px;
        flex-basis: 160px;
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-task-navigation-section {
        min-width: 250px;
        flex-basis: 250px;
        grid-template-columns: 1fr;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation {
        position: relative;
        display: block;
        max-height: 218px;
        padding-right: 42px;
        overflow: hidden;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation-toggle {
        position: absolute;
        z-index: 4;
        top: 7px;
        right: 7px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-navigation-section {
        width: 100%;
        min-width: 0;
        padding: 7px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-theme-list {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-theme-list > .llw-list-button {
        width: 154px;
        min-width: 154px;
        flex: 0 0 154px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-task-navigation-section {
        display: grid;
        width: 205px;
        min-width: 205px;
        flex: 0 0 205px;
        grid-template-rows: auto 1fr;
        max-height: 150px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-task-grid {
        display: flex;
        min-width: 0;
        gap: 5px;
        margin-top: 5px;
        overflow-x: auto;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="spatial-arena"]
    ) .llw-task-button {
        width: 48px;
        min-width: 48px;
        flex: 0 0 48px;
        justify-content: center;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-workspace-content {
        min-width: 0;
        padding: 6px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-metrics {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 5px;
        overflow: hidden;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-command-panel .llw-metric {
        display: grid;
        min-width: 0;
        align-content: center;
        align-items: start;
        justify-content: stretch;
        justify-items: start;
        gap: 2px;
        padding: 4px 7px;
        overflow: hidden;
        border: 0;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-command-panel .llw-metric-label {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: .72rem;
        line-height: 1.15;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-command-panel .llw-metric-value {
        max-width: 100%;
        overflow: hidden;
        font-size: .96rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-command-panel .llw-tool-picker {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-tool-tabs {
        width: 100%;
        max-width: 100%;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-tool-tab {
        min-width: 138px;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tools {
        min-height: 480px;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-answer-panel {
        position: static;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-answer-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (forced-colors: active) {
    .llw-ui-choice[aria-pressed="true"],
    .llw-motion-choice[aria-pressed="true"],
    .llw-tool-tab[aria-pressed="true"],
    .llw-list-button[aria-pressed="true"] {
        border: 3px double Highlight;
    }

    .llw-tool-active-mark,
    .llw-ui-choice-mark {
        forced-color-adjust: none;
    }
}

/* Shared Learning Workspace core convergence: modes, timer, rail and answer dock. */
.llw-visually-hidden,
.llw-condition-prompt.is-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.llw-mode-bar {
    display: flex;
    min-width: 0;
    justify-content: flex-start;
}

.llw-mode-selector {
    position: relative;
    display: grid;
    width: min(520px, 100%);
    height: 46px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px;
    isolation: isolate;
    border: 1px solid #c7d2e1;
    border-radius: 10px;
    background: #f5f7fb;
    box-shadow: inset 0 2px 5px rgb(15 23 42 / 8%);
}

.llw-mode-selector-thumb {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 5px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    border: 1px solid #aebbd0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 5px rgb(15 23 42 / 14%);
    transform: translateX(calc(var(--llw-mode-index, 0) * 100%));
    transition: transform 220ms cubic-bezier(.18, .78, .18, 1);
}

.llw-mode-selector-thumb i {
    display: none;
}

.llw-mode-button {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 38px;
    padding: 0 6px;
    border: 0;
    color: #637089;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    font: 850 11px/1 "Segoe UI", Inter, system-ui, sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
}

.llw-mode-button:hover,
.llw-mode-button:focus-visible {
    color: #24334e;
    background: transparent;
    box-shadow: none;
}

.llw-mode-button.is-active {
    color: #172033;
}

.llw-mode-component[data-visual-skin="tron"][data-learning-mode="lesson"],
.llw-workspace[data-visual-skin="tron"][data-learning-mode="lesson"] {
    --llw-mode-accent: #55efff;
    --llw-mode-accent-2: #477dff;
    --llw-mode-glow: rgba(85, 239, 255, .5);
}

.llw-mode-component[data-visual-skin="tron"][data-learning-mode="hard"],
.llw-workspace[data-visual-skin="tron"][data-learning-mode="hard"] {
    --llw-mode-accent: #ffb342;
    --llw-mode-accent-2: #ff7a35;
    --llw-mode-glow: rgba(255, 179, 66, .5);
}

.llw-mode-component[data-visual-skin="tron"][data-learning-mode="exam"],
.llw-workspace[data-visual-skin="tron"][data-learning-mode="exam"] {
    --llw-mode-accent: #a866ff;
    --llw-mode-accent-2: #ed4dff;
    --llw-mode-glow: rgba(168, 102, 255, .5);
}

.llw-mode-component[data-visual-skin="tron"] .llw-mode-selector,
.llw-workspace[data-visual-skin="tron"] .llw-mode-selector {
    width: min(520px, 100%);
    height: 46px;
    padding: 4px;
    border: 1px solid rgba(118, 150, 176, .19);
    border-radius: 12px;
    background: #070a0f;
    box-shadow: inset 0 5px 14px rgba(0, 0, 0, .68), inset 0 -1px rgba(255, 255, 255, .035);
}

.llw-mode-component[data-visual-skin="tron"] .llw-mode-selector-thumb,
.llw-workspace[data-visual-skin="tron"] .llw-mode-selector-thumb {
    top: 3px;
    bottom: 5px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    padding: 2px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(110deg, rgba(222, 249, 255, .34), rgba(82, 140, 173, .12) 42%, rgba(35, 50, 67, .28));
    box-shadow:
        0 5px 0 #030508,
        0 10px 19px rgba(0, 0, 0, .42),
        inset 0 1px rgba(255, 255, 255, .33),
        inset 0 -3px 8px rgba(0, 0, 0, .32);
    transform: translateX(calc(var(--llw-mode-index, 0) * 100%));
    transition: transform 340ms cubic-bezier(.18, .78, .18, 1), box-shadow 220ms, background 220ms;
}

.llw-mode-component[data-visual-skin="tron"] .llw-mode-selector-thumb::before,
.llw-workspace[data-visual-skin="tron"] .llw-mode-selector-thumb::before {
    position: absolute;
    z-index: -1;
    right: 13%;
    bottom: -4px;
    left: 13%;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--llw-mode-accent), var(--llw-mode-accent-2));
    filter: blur(5px);
    opacity: .82;
    content: "";
}

.llw-mode-component[data-visual-skin="tron"] .llw-mode-selector-thumb i,
.llw-workspace[data-visual-skin="tron"] .llw-mode-selector-thumb i {
    display: block;
    width: 52%;
    height: 2px;
    margin: 31px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--llw-mode-accent), var(--llw-mode-accent-2), transparent);
    box-shadow: 0 0 8px var(--llw-mode-glow);
}

.llw-mode-component[data-visual-skin="tron"] .llw-mode-button,
.llw-workspace[data-visual-skin="tron"] .llw-mode-button {
    min-height: 38px;
    border: 0;
    color: #718291;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    transition: color 150ms, transform 220ms cubic-bezier(.2, 0, 0, 1), text-shadow 220ms;
}

.llw-mode-component[data-visual-skin="tron"] .llw-mode-button:hover,
.llw-mode-component[data-visual-skin="tron"] .llw-mode-button:focus-visible,
.llw-workspace[data-visual-skin="tron"] .llw-mode-button:hover,
.llw-workspace[data-visual-skin="tron"] .llw-mode-button:focus-visible {
    color: #dceef6;
    background: transparent;
    box-shadow: none;
}

.llw-mode-component[data-visual-skin="tron"] .llw-mode-button.is-active,
.llw-workspace[data-visual-skin="tron"] .llw-mode-button.is-active {
    color: #fff;
    text-shadow: 0 0 12px var(--llw-mode-glow);
    transform: translateY(-2px);
}

/* Fusion compact rail timer is one shared component in Default and Tron. */
.llw-metrics {
    grid-template-columns: 218px minmax(0, 1fr) auto;
}

.llw-timer-instrument {
    --llw-time-progress: 0%;
    position: relative;
    box-sizing: border-box;
    width: 218px;
    min-width: 218px;
    height: 52px;
    min-height: 52px;
    display: block;
    overflow: hidden;
    padding: 3px 7px;
    border: 1px solid rgba(125, 156, 180, .21);
    border-radius: 7px;
    color: #edf8fc;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .055), transparent 28%),
        linear-gradient(180deg, #151d27, #080c12);
    box-shadow: 0 4px 0 #030508, inset 0 4px 9px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .05);
}

.llw-timer-instrument::before {
    position: absolute;
    right: 9px;
    bottom: 3px;
    left: 9px;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(179, 216, 231, .22) 0 1px, transparent 1px 10px);
    opacity: .54;
    content: "";
}

.llw-timer-time-hud {
    position: absolute;
    z-index: 20;
    top: 50%;
    right: 9px;
    width: max-content;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
    color: #edf8fc;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
}

.llw-timer-elapsed {
    color: #f2fbff;
    text-shadow: 0 0 8px rgba(105, 236, 255, .17);
}

.llw-timer-separator {
    opacity: .54;
}

.llw-timer-recommended {
    color: #b9cbd3;
    text-shadow: 0 0 7px rgba(255, 111, 85, .14);
}

.llw-timer-instrument .llw-time-progress-track {
    position: absolute;
    right: 7px;
    bottom: 1px;
    left: 7px;
    width: auto;
    height: 10px;
    overflow: visible;
    border: 1px solid rgba(112, 145, 168, .18);
    border-radius: 99px;
    background: #030508;
    box-shadow: inset 0 3px 5px #000;
}

.llw-timer-instrument .llw-time-progress-track::before {
    position: absolute;
    inset: 2px;
    width: auto;
    border-radius: inherit;
    background: linear-gradient(90deg, #50e997 0%, #d9dc55 45%, #ffae42 74%, #ff5a5f 100%);
    box-shadow: none;
    opacity: .15;
    content: "";
}

.llw-timer-instrument .llw-time-progress-track::after {
    position: absolute;
    z-index: 2;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(var(--llw-time-progress) - 4px);
    min-width: 3px;
    max-width: calc(100% - 4px);
    border-radius: inherit;
    background: linear-gradient(90deg, #50e997 0%, #d9dc55 48%, #ffae42 76%, #ff5a5f 100%);
    box-shadow: 0 0 7px rgba(90, 232, 166, .34);
    content: "";
    transition: width 300ms linear;
}

.llw-timer-recommended-marker {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: calc(100% - 2px);
    width: 8px;
    height: 15px;
    border: 2px solid #dffcff;
    border-radius: 50%;
    background: #0a1017;
    box-shadow: 0 0 8px rgba(99, 231, 248, .5);
    transform: translate(-50%, -50%);
}

.llw-timer-instrument[data-progress-band="warning"] .llw-timer-recommended-marker {
    border-color: #f2d75c;
    box-shadow: 0 0 8px rgba(241, 206, 71, .54);
}

.llw-timer-instrument:is([data-progress-band="danger"], [data-progress-band="expired"]) .llw-timer-recommended-marker {
    border-color: #ff725d;
    box-shadow: 0 0 9px rgba(255, 94, 79, .58);
}

.llw-timer-instrument[data-progress-band="expired"] {
    border-color: rgba(255, 101, 94, .38);
    box-shadow: 0 4px 0 #030508, inset 0 0 12px rgba(255, 64, 71, .09), inset 0 4px 9px rgba(0, 0, 0, .45);
}

.llw-theme-label {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-task-grid {
    overflow-y: auto;
    padding-right: 0;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.llw-task-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.llw-workspace:not([data-visual-skin="tron"]) .llw-answer-panel {
    box-sizing: border-box;
    min-height: 88px;
    padding: 8px 10px;
    overflow: hidden;
}

.llw-answer-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.llw-answer-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.llw-answer-row :is(input, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    resize: none;
}

.llw-answer-status {
    min-height: 16px;
    overflow: hidden;
    font-size: .75rem;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-panel {
    box-sizing: border-box;
    height: 112px;
    min-height: 112px;
    grid-template-rows: 0 54px 18px;
    gap: 4px;
    padding: 11px 15px;
    overflow: visible;
}

@media (max-width: 900px) {
    .llw-metrics {
        grid-template-columns: 218px minmax(0, 1fr) auto;
    }

    .llw-tool-picker {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .llw-tool-picker::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 620px) {
    .llw-mode-selector,
    .llw-mode-component[data-visual-skin="tron"] .llw-mode-selector,
    .llw-workspace[data-visual-skin="tron"] .llw-mode-selector {
        width: 100%;
    }

    .llw-mode-button,
    .llw-mode-component[data-visual-skin="tron"] .llw-mode-button,
    .llw-workspace[data-visual-skin="tron"] .llw-mode-button {
        padding-inline: 3px;
        font-size: 9px;
        letter-spacing: .055em;
    }

    .llw-metrics {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        max-height: none;
    }

    .llw-timer-instrument {
        width: 100%;
        min-width: 0;
    }

    .llw-tool-picker {
        min-width: 0;
    }
}

.llw-code-tool {
    height: var(--llw-ide-height, 560px);
    min-height: 360px;
}

.llw-code-tool > .llw-ide-main {
    height: calc(100% - 47px - 8px);
    min-height: 0;
}

.llw-code-tool .llw-editor-workspace {
    min-height: 0;
}

.llw-ide-height-handle {
    position: relative;
    height: 10px;
    min-height: 10px;
    cursor: row-resize;
    background: #1e293b;
}

.llw-ide-height-handle::after {
    content: "";
    position: absolute;
    inset: 0;
}

.llw-ide-height-handle:hover {
    background: #60a5fa;
}

.llw-fullscreen-overlay .llw-code-tool {
    height: 100%;
}

.llw-ide-editor-column {
    grid-template-rows: auto minmax(0, 1fr);
}

.llw-fullscreen-overlay .llw-editor-workspace,
.llw-fullscreen-overlay .llw-ide-empty-state {
    height: 100%;
    min-height: 0;
}

.llw-editor-workspace[hidden],
.llw-ide-empty-state[hidden] {
    display: none;
}

.llw-code-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 180px;
    overflow: hidden;
}

.llw-code-pane .llw-editor-shell,
.llw-ide-main .llw-code-pane .llw-editor-shell {
    width: 100%;
    height: 100%;
    min-height: 180px;
}

.llw-console-splitter {
    position: relative;
    z-index: 2;
    cursor: row-resize;
    background: #334155;
}

.llw-console-splitter::after {
    content: "";
    position: absolute;
    inset: -3px 0;
}

.llw-console-splitter:hover {
    background: #60a5fa;
}

.llw-console-panel {
    min-height: 90px;
    overflow: hidden;
    color: #cbd5e1;
    background: #0f172a;
}

.llw-condition-splitter[hidden] {
    display: none;
}

.llw-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 5px 10px;
    border-bottom: 1px solid #334155;
    background: #182235;
}

.llw-console-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.llw-console-actions .llw-icon-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.llw-console-output {
    height: calc(100% - 39px);
    margin: 0;
    padding: 12px;
    overflow: auto;
    color: inherit;
    font: var(--llw-code-font-size, 13px)/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
}

.llw-ide-empty-state {
    display: grid;
    min-height: 430px;
    place-items: center;
    padding: 28px;
    color: #94a3b8;
    background: #111827;
    text-align: center;
}

.llw-file-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 210px;
    min-width: 92px;
    cursor: pointer;
}

.llw-file-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-dirty-mark {
    color: #fbbf24;
}

.llw-tab-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: inherit;
    background: transparent;
    font: 18px/18px inherit;
    cursor: pointer;
}

.llw-tab-close:hover {
    color: #fff;
    background: #475569;
}

.llw-theme-select {
    min-height: 30px;
    padding: 4px 26px 4px 8px;
    border: 1px solid #52627a;
    border-radius: 6px;
    color: #e9eef8;
    background: #202e47;
}

.llw-code-tool[data-ide-theme="dark"] {
    color-scheme: dark;
}

.llw-code-tool[data-ide-theme="light"] {
    color-scheme: light;
    color: #1f2937;
    background: #f8fafc;
}

.llw-code-tool[data-ide-theme="light"] > .llw-tool-heading,
.llw-code-tool[data-ide-theme="light"] .llw-project-heading,
.llw-code-tool[data-ide-theme="light"] .llw-console-header {
    color: #1f2937;
    background: #e8edf5;
    border-color: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-project-panel,
.llw-code-tool[data-ide-theme="light"] .llw-file-tabs {
    color: #334155;
    background: #f1f5f9;
    border-color: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-tree-file:hover,
.llw-code-tool[data-ide-theme="light"] .llw-tree-folder:hover,
.llw-code-tool[data-ide-theme="light"] .llw-tree-file.active {
    color: #0f172a;
    background: #dbe7f7;
}

.llw-code-tool[data-ide-theme="light"] .llw-tree-file.active {
    box-shadow: inset 2px 0 #2563eb;
}

.llw-code-tool[data-ide-theme="light"] .llw-tree-icon.is-folder::before,
.llw-code-tool[data-ide-theme="light"] .llw-tree-icon.is-folder::after {
    border-color: #64748b;
    background: #dbe4f0;
}

.llw-code-tool[data-ide-theme="light"] .llw-tree-icon.is-folder.is-open::before,
.llw-code-tool[data-ide-theme="light"] .llw-tree-icon.is-folder.is-open::after {
    border-color: #2563eb;
    background: #bfdbfe;
}

.llw-code-tool[data-ide-theme="light"] .llw-tree-icon:is(.is-python, .is-text, .is-binary, .is-warning)::before {
    border-color: #64748b;
    background: #fff;
}

.llw-code-tool[data-ide-theme="light"] .llw-file-tab {
    color: #475569;
    border-color: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-file-tab.active {
    color: #0f172a;
    background: #fff;
    border-bottom-color: #2563eb;
}

.llw-code-tool[data-ide-theme="light"] .llw-code-search,
.llw-code-tool[data-ide-theme="light"] .llw-console-panel,
.llw-code-tool[data-ide-theme="light"] .llw-ide-empty-state {
    color: #334155;
    background: #fff;
    border-color: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-code-search input,
.llw-code-tool[data-ide-theme="light"] .llw-code-search .llw-icon-button,
.llw-code-tool[data-ide-theme="light"] .llw-theme-select,
.llw-code-tool[data-ide-theme="light"] .llw-icon-button {
    color: #1f2937;
    background: #fff;
    border-color: #aebaca;
}

.llw-code-tool[data-ide-theme="light"] .llw-editor-shell,
.llw-code-tool[data-ide-theme="light"] .llw-highlight {
    color: #1f2937;
    background: #fff;
}

.llw-code-tool[data-ide-theme="light"] .llw-line-numbers,
.llw-code-tool[data-ide-theme="light"] .llw-code-status {
    color: #64748b;
    background: #eef2f7;
    border-color: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-editor {
    caret-color: #111827;
}

.llw-code-tool[data-ide-theme="light"] .llw-editor::selection {
    background: rgba(37, 99, 235, .28);
}

.llw-code-tool[data-ide-theme="light"] .llw-token-keyword {
    color: #7c3aed;
}

.llw-code-tool[data-ide-theme="light"] .llw-token-string {
    color: #15803d;
}

.llw-code-tool[data-ide-theme="light"] .llw-token-number {
    color: #b45309;
}

.llw-code-tool[data-ide-theme="light"] .llw-token-comment {
    color: #64748b;
}

.llw-code-tool[data-ide-theme="light"] .llw-token-declaration,
.llw-code-tool[data-ide-theme="light"] .llw-token-call {
    color: #795e26;
}

.llw-code-tool[data-ide-theme="light"] .llw-token-builtin {
    color: #7a3e9d;
}

.llw-code-tool[data-ide-theme="light"] .llw-console-splitter {
    background: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-console-splitter:hover {
    background: #2563eb;
}

.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter {
    background: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter::after {
    background: #94a3b8;
}

.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter:hover,
.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter:focus-visible,
.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter.is-dragging {
    background: #2563eb;
}

.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter:hover::after,
.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter:focus-visible::after,
.llw-code-tool[data-ide-theme="light"] .llw-answer-console-splitter.is-dragging::after {
    background: #dbeafe;
}

.llw-code-tool[data-ide-theme="light"] .llw-tab-close:hover {
    color: #0f172a;
    background: #dbe3ee;
}

@media (max-width: 620px) {
    .llw-learning-layout,
    .llw-learning-layout.is-navigation-collapsed {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .llw-learning-layout:not(.is-navigation-collapsed) {
        grid-template-columns: minmax(150px, 42vw) minmax(0, 1fr);
    }

    .llw-project-splitter,
    .llw-ide-height-handle {
        display: none;
    }

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

    .llw-tool-picker {
        grid-column: 1 / -1;
    }

    .llw-code-tool {
        height: auto;
    }
    .llw-editor-workspace {
        grid-template-rows: minmax(260px, 1fr) 0 auto;
        min-height: 430px;
    }

    .llw-console-splitter {
        display: none;
    }

    .llw-console-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .llw-console-actions {
        width: 100%;
        overflow-x: auto;
    }

    .llw-fullscreen-overlay .llw-tool-heading {
        display: block;
        padding: 46px 8px 7px;
    }

    .llw-fullscreen-overlay .llw-code-heading .llw-muted {
        display: none;
    }

    .llw-fullscreen-overlay .llw-code-actions {
        align-items: center;
        flex-flow: row nowrap;
        gap: 6px;
        margin-top: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .llw-fullscreen-overlay .llw-code-actions > * {
        flex: 0 0 auto;
    }

    .llw-fullscreen-overlay > .llw-code-tool {
        overflow-y: auto;
    }
}

/* Fullscreen IDE UX refinement. */
.llw-condition-window {
    display: flex;
    flex-direction: column;
    width: min(430px, calc(100vw - 16px));
    height: min(360px, calc(100vh - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
}

.llw-condition-header {
    flex: 0 0 auto;
}

.llw-condition-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

.llw-condition-prompt {
    display: grid;
    flex: 1 1 auto;
    min-height: 90px;
    place-items: center;
    margin: 0;
    color: #6b7890;
    text-align: center;
}

.llw-condition-controls {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.llw-condition-minimize,
.llw-runtime-button {
    display: inline-grid;
    width: 28px;
    height: 26px;
    place-items: center;
    padding: 0;
    line-height: 1;
}

.llw-editor-workspace {
    grid-template-rows: minmax(180px, 1fr) 10px minmax(150px, var(--llw-console-height));
}

.llw-console-output {
    scrollbar-color: #52627a #0f172a;
}

.llw-code-tool[data-ide-theme="light"] .llw-console-header,
.llw-code-tool[data-ide-theme="light"] .llw-console-actions,
.llw-code-tool[data-ide-theme="light"] .llw-console-output {
    color: #1f2937;
    background: #fff;
    border-color: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-console-header {
    background: #e8edf5;
}

.llw-code-tool[data-ide-theme="light"] .llw-console-output {
    scrollbar-color: #9aa8ba #eef2f7;
}

.llw-file-tab {
    position: relative;
    gap: 5px;
    min-width: 96px;
    height: 30px;
    padding: 4px 8px;
}

.llw-file-tab.active {
    border-bottom-color: transparent;
}

.llw-file-tab.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 4px;
    background: #22c55e;
}

.llw-tab-close {
    width: 18px;
    height: 18px;
    visibility: hidden;
    font-size: 16px;
    line-height: 16px;
}

.llw-file-tab:hover .llw-tab-close,
.llw-file-tab.active .llw-tab-close,
.llw-tab-close:focus-visible {
    visibility: visible;
}

.llw-code-tool[data-ide-theme="light"] .llw-file-tab.active::after {
    background: #16a34a;
}

.llw-highlight.is-wrapped,
.llw-editor.is-wrapped {
    overflow-x: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .llw-editor-workspace {
        grid-template-rows: minmax(260px, auto) 0 minmax(140px, 210px) auto;
        overflow: visible;
    }

    .llw-code-pane {
        min-height: 260px;
    }

    .llw-console-panel {
        display: block;
    }

    .llw-console-header {
        align-items: center;
        flex-direction: row;
    }

    .llw-condition-window {
        width: calc(100vw - 16px);
        min-width: 0;
    }
}

/* Final cascade overrides for the compact viewport-filling workspace. */
.llw-workspace-stage,
.llw-workspace-empty {
    min-height: var(--llw-workspace-available-height, max(610px, calc(100dvh - 150px)));
}

.llw-workspace-content {
    display: grid;
    grid-template-rows:
        auto
        minmax(180px, var(--llw-work-area-height, 1fr))
        10px
        minmax(140px, auto);
    min-height: var(--llw-workspace-available-height, max(610px, calc(100dvh - 150px)));
    align-content: stretch;
    padding: 10px 12px 12px;
}

.llw-tools,
.llw-tool-host,
.llw-code-tool,
.llw-code-tool > .llw-ide-main,
.llw-ide-editor-column,
.llw-editor-workspace,
.llw-code-pane,
.llw-code-area,
.llw-editor-shell {
    min-height: 0;
}

.llw-tools {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}

.llw-tool-host {
    height: 100%;
}

.llw-code-tool {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) 10px;
    height: 100%;
    min-height: 340px;
}

.llw-code-tool.is-manual-height {
    height: var(--llw-ide-manual-height);
}

.llw-code-tool > .llw-ide-main {
    height: auto;
}

.llw-ide-main {
    min-height: 0;
}

.llw-ide-editor-column {
    grid-template-rows: auto minmax(0, 1fr);
}

.llw-editor-workspace {
    height: 100%;
    grid-template-rows: minmax(180px, 1fr) 10px var(--llw-console-height);
}

.llw-code-pane,
.llw-ide-main .llw-code-pane .llw-editor-shell {
    min-height: 0;
}

.llw-fullscreen-overlay .llw-code-tool {
    grid-template-rows: auto minmax(0, 1fr);
}

.llw-metrics {
    grid-template-columns: minmax(120px, auto) minmax(120px, auto) minmax(420px, 1fr);
    align-items: center;
    gap: 6px;
}

.llw-command-panel {
    padding: 3px 6px;
}

.llw-command-panel .llw-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 9px;
}

.llw-tool-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
}

.llw-tool-tabs {
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
}

.llw-tool-tab {
    padding: 4px 8px;
    white-space: nowrap;
}

.llw-tool-tab-icon {
    display: inline-grid;
    width: 34px;
    height: 32px;
    place-items: center;
    padding: 5px;
    border-radius: 9px;
}

.llw-tool-tab-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.llw-ide-height-handle {
    display: block;
    min-height: 10px;
    cursor: ns-resize;
}

.llw-fullscreen-overlay .llw-ide-height-handle {
    display: none;
}

@media (max-width: 760px) {
    .llw-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .llw-tool-picker {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .llw-tool-tabs {
        flex-wrap: wrap;
    }
}

/* Workspace-wide dark theme follows the IDE selector without changing tool behavior. */
.llw-workspace[data-workspace-theme="dark"] {
    --llw-border: #334155;
    --llw-ink: #e5edf8;
    --llw-muted: #9aa9bd;
    color-scheme: dark;
}

.llw-workspace[data-workspace-theme="dark"] .llw-workspace-stage {
    border-color: #334155;
    background:
        linear-gradient(rgba(148, 163, 184, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .045) 1px, transparent 1px),
        #0b1220;
    background-size: 28px 28px;
}

.llw-workspace[data-workspace-theme="dark"] .llw-workspace-content,
.llw-workspace[data-workspace-theme="dark"] .llw-workspace-empty,
.llw-workspace[data-workspace-theme="dark"] .llw-navigation {
    color: var(--llw-ink);
}

.llw-workspace[data-workspace-theme="dark"] .llw-navigation-section,
.llw-workspace[data-workspace-theme="dark"] .llw-command-panel,
.llw-workspace[data-workspace-theme="dark"] .llw-metric,
.llw-workspace[data-workspace-theme="dark"] .llw-tools,
.llw-workspace[data-workspace-theme="dark"] .llw-answer-panel {
    border-color: var(--llw-border);
    color: var(--llw-ink);
    background: #111b2d;
}

.llw-workspace[data-workspace-theme="dark"] .llw-list-button,
.llw-workspace[data-workspace-theme="dark"] .llw-tool-tab,
.llw-workspace[data-workspace-theme="dark"] .llw-secondary-button {
    border-color: #475569;
    color: #dce6f3;
    background: #18243a;
}

.llw-workspace[data-workspace-theme="dark"] .llw-list-button:hover,
.llw-workspace[data-workspace-theme="dark"] .llw-list-button.active,
.llw-workspace[data-workspace-theme="dark"] .llw-tool-tab:hover,
.llw-workspace[data-workspace-theme="dark"] .llw-tool-tab.active,
.llw-workspace[data-workspace-theme="dark"] .llw-secondary-button:hover {
    border-color: #60a5fa;
    color: #dbeafe;
    background: #233a5e;
}

.llw-workspace[data-workspace-theme="dark"] .llw-primary-button {
    border-color: #4f8df7;
    color: #fff;
    background: #2563c7;
}

.llw-workspace[data-workspace-theme="dark"] .llw-primary-button:hover {
    background: #3478df;
}

.llw-workspace[data-workspace-theme="dark"] .llw-answer-row textarea {
    border-color: #475569;
    color: #f1f5f9;
    background: #0f172a;
}

.llw-workspace[data-workspace-theme="dark"] .llw-tool-panel,
.llw-workspace[data-workspace-theme="dark"] .llw-text-editor,
.llw-workspace[data-workspace-theme="dark"] .llw-canvas-placeholder {
    border-color: #334155;
    color: #e5edf8;
    background: #111827;
}

.llw-workspace[data-workspace-theme="dark"] .llw-table-grid {
    background: #334155;
}

.llw-workspace[data-workspace-theme="dark"] .llw-table-grid input {
    color: #e5edf8;
    background: #111827;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-window {
    border-color: #475569;
    color: #e5edf8;
    background: #111827;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-header,
.llw-workspace[data-workspace-theme="dark"] .llw-condition-controls {
    border-color: #334155;
    color: #e5edf8;
    background: #182235;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-body {
    color: #d7e1ee;
    background: #0f172a;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-prompt {
    color: #9aa9bd;
}

/* Manual-check UX refinements: floating condition, compact answer and explicit IDE state. */
.llw-workspace-content > .llw-condition-window.is-minimized {
    position: fixed !important;
    width: 300px !important;
    min-width: 300px;
    max-width: min(420px, 100%);
    height: 34px !important;
    min-height: 0 !important;
    max-height: 34px !important;
    overflow: hidden;
    resize: none;
    transition: none !important;
}

.llw-workspace-content > .llw-condition-window:not(.is-minimized) {
    position: fixed;
    z-index: 50;
    right: auto;
}

.llw-condition-window.is-minimized .llw-condition-header {
    min-height: 32px;
    padding: 4px 7px 4px 10px;
}

.llw-condition-window.is-minimized .llw-condition-body {
    display: none !important;
    flex: 0 0 0;
    height: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.llw-answer-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
}

.llw-answer-heading .llw-panel-title {
    margin: 0;
}

.llw-answer-row {
    display: flex;
    justify-content: flex-start;
}

.llw-answer-row textarea {
    width: clamp(280px, 25%, 460px);
    min-width: 280px;
}

.llw-console-heading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.llw-console-result-button {
    display: inline-grid;
    width: 26px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 1px solid #8b5cf6;
    border-radius: 6px;
    color: #ede9fe;
    background: #6d28d9;
    font: 800 17px/1 inherit;
    cursor: pointer;
    transition: opacity 200ms ease, transform 200ms ease;
}

.llw-console-result-button.is-leaving {
    opacity: 0;
    transform: translateY(-4px) scale(.86);
    pointer-events: none;
}

.llw-console-result-button:hover {
    background: #7c3aed;
}

.llw-console-result-button:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

.llw-cursor-status {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.llw-runtime-actions .llw-runtime-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
}

.llw-time-metric {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.llw-time-metric::before {
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: var(--llw-time-progress, 0%);
    background: rgb(var(--llw-time-progress-color, 56 189 108) / 24%);
    content: "";
    transition: width .35s linear, background-color .35s linear;
}

.llw-time-metric[data-progress-band="danger"]::before,
.llw-time-metric[data-progress-band="expired"]::before {
    background: rgb(var(--llw-time-progress-color) / 34%);
}

.llw-condition-resize {
    position: absolute;
    z-index: 3;
    display: block;
    touch-action: none;
}

.llw-condition-resize-right {
    top: 42px;
    right: 0;
    bottom: 14px;
    width: 9px;
    cursor: ew-resize;
}

.llw-condition-resize-bottom {
    right: 14px;
    bottom: 0;
    left: 0;
    height: 9px;
    cursor: ns-resize;
}

.llw-condition-resize-corner {
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 0 0 7px;
    opacity: .55;
    cursor: nwse-resize;
}

.llw-condition-window.is-minimized .llw-condition-resize {
    display: none;
}

/* The gutter element fills the editor shell, so its border continues below short files. */
.llw-editor-shell > .llw-line-numbers {
    align-self: stretch;
    height: 100%;
}

@media (max-width: 760px) {
    .llw-answer-row textarea {
        width: 100%;
        min-width: 0;
    }
}

/* Code Workspace uses one compact IDE toolbar with quiet logical separators. */
.llw-code-tool > .llw-code-toolbar {
    box-sizing: border-box;
    min-height: 36px;
    height: 36px;
    padding: 2px 8px;
    gap: 0;
    overflow: hidden;
}

.llw-code-toolbar > .llw-code-toolbar-groups {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.llw-code-toolbar-group {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    height: 30px;
    align-items: center;
    gap: 3px;
    padding: 0 7px;
}

.llw-code-toolbar-group:first-child {
    padding-left: 0;
}

.llw-code-toolbar-group + .llw-code-toolbar-group::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: rgb(148 163 184 / 28%);
}

.llw-code-toolbar .llw-runtime-actions {
    gap: 2px;
    padding: 0;
}

.llw-code-toolbar .llw-runtime-actions .llw-runtime-button,
.llw-code-toolbar .llw-icon-button,
.llw-code-toolbar .lcs-trigger {
    box-sizing: border-box;
    width: auto;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 12px;
}

.llw-code-toolbar .llw-runtime-actions .llw-runtime-button {
    flex: 0 0 28px;
    width: 28px;
    padding: 0;
}

.llw-code-toolbar .llw-theme-select {
    box-sizing: border-box;
    height: 28px;
    min-height: 28px;
    padding: 2px 24px 2px 7px;
    border-radius: 4px;
    font-size: 12px;
}

.llw-code-tool[data-ide-theme="light"] .llw-code-toolbar-group + .llw-code-toolbar-group::before {
    background: rgb(71 85 105 / 26%);
}

.llw-code-actions .llw-icon-button,
.llw-fullscreen-close {
    border: 1px solid #52627a;
    color: #e5edf8;
    background: #182235;
}

.llw-code-actions .llw-icon-button:hover:not(:disabled),
.llw-fullscreen-close:hover:not(:disabled) {
    border-color: #7c8ca4;
    background: #26344a;
}

.llw-code-actions .llw-icon-button:active:not(:disabled),
.llw-fullscreen-close:active:not(:disabled) {
    background: #334155;
}

.llw-code-actions .llw-icon-button:disabled,
.llw-fullscreen-close:disabled {
    color: #94a3b8;
    background: #111827;
    opacity: .68;
}

.llw-code-actions .llw-icon-button:focus-visible,
.llw-fullscreen-close:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.llw-code-tool[data-ide-theme="light"] .llw-code-actions .llw-icon-button,
.llw-code-tool[data-ide-theme="light"] .llw-fullscreen-close {
    border-color: #aebbd0;
    color: #243247;
    background: #eef2f7;
}

.llw-tool-tab-icon[data-tool="code"] svg {
    color: #3776ab;
    filter: drop-shadow(2px 2px 0 #ffd343);
}

/* Keep the compact condition control and runtime actions geometrically stable. */
.llw-workspace-content > .llw-condition-window.is-minimized {
    width: 300px !important;
    height: 34px !important;
    min-height: 0 !important;
    max-height: 34px !important;
    overflow: hidden;
    border-radius: 8px;
}

.llw-condition-window.is-minimized .llw-condition-header {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 2px 4px 2px 10px;
    border-bottom: 0;
}

.llw-condition-window.is-minimized .llw-condition-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-condition-window.is-minimized .llw-condition-actions {
    flex: 0 0 auto;
}

/* Fullscreen is one grid: IDE above, answer below, with a non-overlapping toolbar. */
.llw-fullscreen-overlay {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: auto;
}

.llw-fullscreen-overlay,
.llw-fullscreen-overlay * {
    box-sizing: border-box;
}

.llw-fullscreen-overlay > .llw-code-tool {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.llw-fullscreen-overlay .llw-tool-heading {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    padding: 7px 12px;
}

.llw-fullscreen-overlay[data-ide-theme="dark"] .llw-tool-heading {
    color: #e5edf8;
    background: #182235;
    border-color: #334155;
}

.llw-fullscreen-overlay > .llw-condition-window {
    position: fixed;
    z-index: 10010;
    right: auto;
}

.llw-fullscreen-overlay > .llw-condition-window.is-minimized {
    width: 300px !important;
    min-width: 300px;
    max-width: calc(100vw - 16px);
    height: 34px !important;
    min-height: 34px;
    overflow: hidden;
    resize: none;
    opacity: 1 !important;
}

.llw-fullscreen-overlay .llw-code-actions {
    flex: 0 0 auto;
    flex-flow: row nowrap;
    min-width: 0;
    overflow-x: auto;
}

.llw-fullscreen-overlay .llw-code-actions > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-condition-window {
    border-color: #475569;
    color: #e5edf8;
    background: #111827;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-condition-window .llw-condition-header,
.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-condition-window .llw-condition-controls {
    border-color: #334155;
    color: #e5edf8;
    background: #182235;
}

.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-condition-window .llw-condition-body {
    color: #d7e1ee;
    background: #0f172a;
}

.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-condition-window .llw-condition-prompt {
    color: #9aa9bd;
}

.llw-fullscreen-overlay .llw-code-pane:has(.llw-code-search:not([hidden])) {
    grid-template-rows: auto minmax(0, 1fr);
}

.llw-code-search[hidden] {
    display: none;
}

.llw-fullscreen-overlay .llw-code-search {
    position: static;
    width: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

.llw-fullscreen-overlay > .llw-answer-panel {
    flex: 0 0 auto;
    margin: 0 10px 10px;
    padding: 10px 12px;
}

.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-answer-panel {
    border-color: #334155;
    color: #e5edf8;
    background: #111b2d;
}

.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-answer-panel textarea {
    border-color: #475569;
    color: #f1f5f9;
    background: #0f172a;
}

@media (max-width: 760px) {
    .llw-fullscreen-overlay .llw-code-actions {
        justify-self: end;
    }
}

.llw-tool-tab-icon[data-tool="text"] svg {
    color: #2b579a;
    fill: rgb(43 87 154 / 16%);
}

.llw-tool-tab-icon[data-tool="table"] svg {
    color: #217346;
    fill: rgb(33 115 70 / 16%);
}

.llw-tool-tab-icon[data-tool="canvas"] svg {
    color: #a855f7;
    fill: rgb(236 72 153 / 14%);
}

@media (max-width: 760px) {
    .llw-cursor-status {
        font-size: 0;
    }

    .llw-cursor-status::after {
        content: attr(title);
        font-size: 11px;
    }
}

.llw-theme-label {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.llw-theme-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.llw-mode-badge {
    justify-self: start;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1.2;
}

.llw-mode-lesson {
    color: #1d4ed8;
    background: #dbeafe;
}

.llw-mode-hard {
    color: #9a3412;
    background: #ffedd5;
}

.llw-mode-exam {
    color: #7e22ce;
    background: #f3e8ff;
}

.llw-empty.is-error,
.llw-condition-prompt.is-error {
    color: #b42318;
}

.llw-task-button.is-loading::after {
    content: "…";
    position: absolute;
    right: 3px;
    font-weight: 800;
}

.llw-condition-media {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    place-items: center;
}

.llw-condition-media > * {
    grid-area: 1 / 1;
}

.llw-condition-task-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    transition: opacity .08s linear;
}

.llw-condition-window.is-user-resized .llw-condition-task-image {
    width: 100%;
    height: 100%;
}

.llw-condition-task-image[hidden],
.llw-condition-prompt[hidden] {
    display: none !important;
}

.llw-workspace[data-workspace-theme="dark"] .llw-mode-lesson,
.llw-fullscreen-overlay[data-ide-theme="dark"] .llw-mode-lesson {
    color: #bfdbfe;
    background: #1e3a5f;
}

.llw-workspace[data-workspace-theme="dark"] .llw-mode-hard,
.llw-fullscreen-overlay[data-ide-theme="dark"] .llw-mode-hard {
    color: #fed7aa;
    background: #5c2d16;
}

.llw-workspace[data-workspace-theme="dark"] .llw-mode-exam,
.llw-fullscreen-overlay[data-ide-theme="dark"] .llw-mode-exam {
    color: #e9d5ff;
    background: #4c1d6f;
}

.llw-workspace[data-workspace-theme="dark"] .llw-empty.is-error,
.llw-workspace[data-workspace-theme="dark"] .llw-condition-prompt.is-error,
.llw-fullscreen-overlay[data-ide-theme="dark"] .llw-condition-prompt.is-error {
    color: #fca5a5;
}

/* Compact navigation and image-first condition window UX. */
.llw-task-navigation-section {
    min-height: 0;
}

.llw-task-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    align-content: start;
    max-height: 238px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    scrollbar-gutter: stable;
}

.llw-task-grid .llw-task-button {
    position: relative;
    justify-content: center;
    min-width: 0;
    min-height: 32px;
    padding: 5px 3px;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.llw-task-grid .llw-key-task-marker {
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 1;
    color: #d99000;
    font-size: 9px;
    line-height: 1;
    pointer-events: none;
}

.llw-task-grid .llw-list-label-full {
    display: inline;
}

.llw-task-grid .llw-list-label-compact {
    display: none;
}

.llw-condition-window:not(.is-minimized) {
    display: flex;
    overflow: hidden;
    min-width: 160px;
    min-height: 120px;
    resize: none;
    flex-direction: column;
    background: transparent;
}

.llw-condition-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    transition: opacity .08s linear;
}

.llw-condition-nav,
.llw-condition-opacity-indicator {
    position: absolute;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, background-color .16s ease, transform .16s ease;
}

.llw-condition-nav {
    top: 50%;
    display: grid;
    width: 34px;
    height: 46px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: rgb(15 23 42 / 58%);
    box-shadow: 0 2px 12px rgb(15 23 42 / 22%);
    font: 800 22px/1 sans-serif;
    place-items: center;
    cursor: pointer;
}

.llw-condition-nav:hover:not(:disabled),
.llw-condition-nav:focus-visible {
    background: rgb(15 23 42 / 78%);
}

.llw-condition-nav:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.llw-condition-nav:disabled {
    cursor: wait;
    opacity: 0;
}

.llw-condition-nav-previous {
    left: 8px;
}

.llw-condition-nav-next {
    right: 8px;
}

.llw-condition-opacity-indicator {
    right: 48px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 999px;
    color: #fff;
    background: rgb(15 23 42 / 58%);
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

.llw-condition-opacity-track {
    width: 38px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(255 255 255 / 34%);
}

.llw-condition-opacity-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #fff;
}

.llw-condition-opacity-value {
    min-width: 26px;
    text-align: right;
}

.llw-condition-window:hover .llw-condition-nav:not(:disabled),
.llw-condition-window:hover .llw-condition-opacity-indicator,
.llw-condition-embedded:hover .llw-condition-nav:not(:disabled) {
    opacity: 1;
}

.llw-condition-window:hover .llw-condition-nav:not(:disabled),
.llw-condition-embedded:hover .llw-condition-nav:not(:disabled) {
    pointer-events: auto;
}

.llw-condition-opacity-indicator[hidden] {
    display: none;
}

.llw-runtime-actions {
    align-items: center;
    line-height: 1;
}

.llw-runtime-actions .llw-run-button,
.llw-runtime-actions .llw-stop-button {
    display: inline-grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    line-height: 1;
}

.llw-runtime-icon,
.llw-runtime-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.llw-runtime-icon {
    flex: 0 0 18px;
    line-height: 0;
}

.llw-runtime-icon svg {
    overflow: visible;
    fill: currentColor;
}

.llw-code-tool[data-ide-theme="dark"] .llw-runtime-actions .llw-run-button {
    color: #4ade80;
}

.llw-code-tool[data-ide-theme="dark"] .llw-runtime-actions .llw-stop-button {
    color: #f87171;
}

.llw-code-tool[data-ide-theme="light"] .llw-runtime-actions .llw-run-button {
    color: #15803d;
}

.llw-code-tool[data-ide-theme="light"] .llw-runtime-actions .llw-stop-button {
    color: #b91c1c;
}

/* The condition shares one image node between embedded and floating modes. */
.llw-workspace-content.is-embedded-condition {
    grid-template-rows:
        auto
        minmax(180px, var(--llw-work-area-height, 1fr))
        10px
        minmax(140px, auto);
}

.llw-condition-embedded {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #cbd6e5;
    border-radius: 10px;
    color: var(--llw-ink);
    background: #fff;
}

.llw-condition-embedded-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 7px 10px;
    border-bottom: 1px solid #d8e1ee;
    background: #f5f8fc;
}

.llw-condition-embedded-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.llw-condition-embedded-body {
    display: grid;
    min-height: 0;
    overflow: hidden;
}

.llw-workspace .llw-condition-embedded-body {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.llw-workspace .llw-condition-embedded-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.llw-workspace .llw-condition-embedded .llw-condition-media {
    box-sizing: border-box;
    min-height: 100%;
    overflow: visible;
    padding: 10px;
    place-items: start center;
}

.llw-condition-embedded .llw-condition-task-image {
    width: var(--llw-embedded-image-width, auto);
    height: var(--llw-embedded-image-height, auto);
    max-width: 100%;
    max-height: 100%;
    cursor: default;
    touch-action: auto;
    opacity: 1 !important;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-window:not(.is-minimized),
.llw-fullscreen-overlay[data-ide-theme="dark"] > .llw-condition-window:not(.is-minimized) {
    background: transparent;
}

.llw-condition-splitter {
    position: relative;
    z-index: 3;
    display: block;
    height: 10px;
    min-height: 10px;
    border: 0;
    border-radius: 5px;
    background: #d8e1ee;
    cursor: ns-resize;
    touch-action: none;
}

.llw-condition-splitter::after {
    position: absolute;
    inset: 3px max(18px, 42%);
    border-radius: 999px;
    background: #7f91aa;
    content: "";
}

.llw-condition-splitter:hover,
.llw-condition-splitter:focus-visible {
    background: #bfdbfe;
}

.llw-condition-splitter:focus-visible {
    outline: 2px solid #315fc5;
    outline-offset: 2px;
}

.llw-workspace-content.is-embedded-condition > .llw-tools,
.llw-workspace-content.is-embedded-condition > .llw-answer-panel {
    min-height: 0;
}

.llw-workspace-content.is-embedded-condition > .llw-tools {
    height: 100%;
}

.llw-workspace-content.is-embedded-condition > .llw-answer-panel {
    overflow: auto;
}

.llw-fullscreen-overlay.is-embedded-condition {
    grid-template-rows:
        minmax(180px, var(--llw-work-area-height, 1fr))
        10px
        minmax(140px, auto);
    gap: 10px;
    padding: 10px;
    background: #f8fbff;
}

.llw-fullscreen-overlay.is-embedded-condition > .llw-condition-embedded,
.llw-fullscreen-overlay.is-embedded-condition > .llw-answer-panel {
    min-height: 0;
}

.llw-fullscreen-overlay.is-embedded-condition > .llw-answer-panel {
    margin: 0;
    overflow: auto;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-embedded,
.llw-fullscreen-overlay.is-embedded-condition[data-ide-theme="dark"] > .llw-condition-embedded {
    border-color: #334155;
    color: #e5edf8;
    background: #111827;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-embedded-header,
.llw-fullscreen-overlay.is-embedded-condition[data-ide-theme="dark"] .llw-condition-embedded-header {
    border-color: #334155;
    background: #182235;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-embedded-body,
.llw-fullscreen-overlay.is-embedded-condition[data-ide-theme="dark"] .llw-condition-embedded-body {
    background: #0f172a;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-splitter,
.llw-fullscreen-overlay.is-embedded-condition[data-ide-theme="dark"] > .llw-condition-splitter {
    background: #334155;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-splitter::after,
.llw-fullscreen-overlay.is-embedded-condition[data-ide-theme="dark"] > .llw-condition-splitter::after {
    background: #94a3b8;
}

.llw-fullscreen-overlay.is-embedded-condition[data-ide-theme="dark"] {
    background: #0b1220;
}

@media (max-width: 620px) {
    .llw-workspace-content.is-embedded-condition {
        grid-template-rows:
            auto
            minmax(180px, var(--llw-work-area-height, 1fr))
            10px
            minmax(140px, auto);
    }
}

/* Graphics workspace: collapsed condition lives in the command row, not on the canvas. */
.llw-metrics {
    grid-template-columns:
        minmax(120px, auto)
        minmax(120px, auto)
        minmax(300px, 1fr)
        auto;
    align-items: stretch;
    gap: 4px;
}

.llw-command-panel {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
}

.llw-command-panel .llw-metric {
    height: 100%;
    min-height: 0;
    align-items: center;
    padding: 1px 6px;
}

.llw-command-panel .llw-tool-picker {
    height: 100%;
    flex-wrap: nowrap;
    gap: 5px;
    padding: 1px 4px;
}

.llw-command-panel .llw-tool-tabs {
    flex-wrap: nowrap;
    gap: 3px;
    margin: 0;
}

.llw-command-panel .llw-tool-tab-icon {
    width: 30px;
    height: 28px;
    padding: 4px;
}

.llw-command-panel .llw-tool-tab-icon svg {
    width: 18px;
    height: 18px;
}

.llw-condition-restore {
    display: inline-flex;
    height: 32px;
    min-width: 0;
    max-width: min(260px, 32vw);
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-left: auto;
    padding: 5px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    background: #fff;
    white-space: nowrap;
    cursor: pointer;
}

.llw-condition-restore[hidden] {
    display: none;
}

.llw-condition-restore:hover,
.llw-condition-restore:focus-visible {
    border-color: #64748b;
    background: #f8fafc;
}

.llw-condition-restore-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.llw-condition-restore-icon {
    flex: 0 0 auto;
}

.llw-condition-window[hidden] {
    display: none !important;
}

.llw-fullscreen-overlay.is-drawing-fullscreen {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    overflow: hidden;
    background: #eef2f7;
}

.llw-workspace-content.is-drawing-workspace {
    grid-template-rows:
        auto
        minmax(320px, 1fr)
        6px
        minmax(96px, auto);
}

.llw-workspace-content.is-drawing-workspace .llw-tools,
.llw-workspace-content.is-drawing-workspace .llw-tool-host,
.llw-workspace-content.is-drawing-workspace .llw-drawing-tool {
    height: 100%;
    min-height: 0;
}

.llw-fullscreen-overlay.is-drawing-fullscreen > .llw-fullscreen-close {
    position: absolute;
    z-index: 10020;
    top: 12px;
    right: 12px;
}

.llw-fullscreen-overlay.is-drawing-fullscreen > .llw-metrics {
    width: 100%;
    padding-right: 4px;
}

.llw-fullscreen-overlay.is-drawing-fullscreen > .llw-tools,
.llw-fullscreen-overlay.is-drawing-fullscreen .llw-tool-host,
.llw-fullscreen-overlay.is-drawing-fullscreen .llw-drawing-tool {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.llw-fullscreen-overlay.is-drawing-fullscreen > .llw-tools {
    overflow: hidden;
}

.llw-fullscreen-overlay.is-drawing-fullscreen .llw-condition-window:not([hidden]) {
    position: fixed;
    z-index: 10010;
}

.llw-fullscreen-overlay.is-drawing-fullscreen[data-ide-theme="dark"] {
    background: #0b1220;
}

.llw-workspace[data-workspace-theme="dark"] .llw-condition-restore,
.llw-fullscreen-overlay[data-ide-theme="dark"] .llw-condition-restore {
    border-color: #475569;
    color: #e5edf8;
    background: #182235;
}

@media (max-width: 900px) {
    .llw-command-panel.llw-metrics {
        grid-template-columns:
            minmax(112px, auto)
            minmax(112px, auto)
            minmax(270px, 1fr)
            auto;
    }

    .llw-command-panel .llw-tool-picker {
        min-width: 0;
        grid-column: auto;
    }

    .llw-command-panel .llw-condition-restore {
        max-width: 100%;
        grid-column: auto;
        justify-self: end;
    }

    .llw-fullscreen-overlay.is-drawing-fullscreen > .llw-command-panel {
        padding-right: 4px;
    }
}

/* Final visual-mode reconciliation: keep the proposed material layer above legacy dark-theme rules. */
.llw-workspace[data-workspace-theme="dark"][data-learning-ui="graphite-focus"] .llw-navigation {
    border-color: #303d4e;
    background: #0e141c;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="graphite-focus"] .llw-navigation-section,
.llw-workspace[data-workspace-theme="dark"][data-learning-ui="graphite-focus"] .llw-list-button,
.llw-workspace[data-workspace-theme="dark"][data-learning-ui="graphite-focus"] .llw-command-panel .llw-metric {
    border-color: #2c3848;
    background: transparent;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="graphite-focus"] .llw-workspace-stage {
    border-color: #354254;
    background: #0a1017;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="graphite-focus"] :is(.llw-metrics, .llw-tools, .llw-answer-panel) {
    border-color: #354254;
    background: #101822;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="graphite-focus"] .llw-tool-tab {
    border-color: #3b495b;
    background: linear-gradient(#273342, #1a2431);
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="luminous-deck"] .llw-navigation {
    border-color: #285777;
    background: linear-gradient(90deg, rgb(69 220 255 / 8%), transparent 24%, rgb(158 123 255 / 7%)), #091520;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="luminous-deck"] .llw-list-button {
    border-color: #2b5673;
    color: #c8e9f4;
    background: #10263a;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="luminous-deck"] .llw-workspace-stage {
    border-color: #244866;
    background: radial-gradient(circle at 78% 0, rgb(111 74 255 / 9%), transparent 34%), radial-gradient(circle at 0 72%, rgb(32 198 255 / 7%), transparent 28%), #07111c;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="luminous-deck"] .llw-metrics {
    border-color: #285777;
    background: linear-gradient(180deg, #10283c, #0b1927);
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="luminous-deck"] .llw-tool-tab {
    border-color: #2f5b78;
    background: linear-gradient(180deg, #173c55, #10263a);
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="luminous-deck"] .llw-tools {
    border-color: #285777;
    background: #0b1826;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="luminous-deck"] .llw-answer-panel {
    border-color: #563f81;
    background: linear-gradient(90deg, #15182d, #101a2d);
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-navigation {
    border-color: #303653;
    background: #090c18;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-navigation-section,
.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-list-button {
    border-color: #303653;
    background: #0e1222;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-workspace-stage {
    border-color: #414a70;
    background: linear-gradient(145deg, rgb(82 101 165 / 8%), transparent 38%), #090d19;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-metrics {
    border-color: #3d4567;
    background: #11162a;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-tool-tab {
    border-color: #475079;
    background: #171d34;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-tools {
    border-color: #53618e;
    background: #0e1426;
}

.llw-workspace[data-workspace-theme="dark"][data-learning-ui="spatial-arena"] .llw-answer-panel {
    border-color: #8e6b38;
    background: #1c1820;
}

.llw-workspace:is([data-learning-ui="graphite-focus"], [data-learning-ui="luminous-deck"], [data-learning-ui="spatial-arena"]) button:not([hidden]),
.llw-fullscreen-overlay:is([data-learning-ui="graphite-focus"], [data-learning-ui="luminous-deck"], [data-learning-ui="spatial-arena"]) button:not([hidden]) {
    min-width: 44px;
    min-height: 44px;
}

.llw-workspace:is([data-learning-ui="graphite-focus"], [data-learning-ui="luminous-deck"], [data-learning-ui="spatial-arena"]) .llw-condition-window.is-minimized,
.llw-fullscreen-overlay:is([data-learning-ui="graphite-focus"], [data-learning-ui="luminous-deck"], [data-learning-ui="spatial-arena"]) .llw-condition-window.is-minimized {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
}

.llw-condition-nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

.llw-workspace[data-learning-ui="luminous-deck"].is-learning-ui-transitioning .llw-workspace-stage::before,
.llw-workspace[data-learning-ui="luminous-deck"].is-learning-tool-transitioning .llw-tool-host::before {
    inset: 0;
    border-width: 2px;
    filter: none;
}

.llw-workspace[data-learning-motion="low"][data-learning-ui="spatial-arena"] .llw-tool-host::before {
    background: linear-gradient(90deg, transparent 0 38%, rgb(106 168 255 / 24%) 48% 52%, transparent 62%);
}

@media (hover: none) {
    .llw-workspace[data-learning-ui] .llw-condition-nav:not(:disabled),
    .llw-fullscreen-overlay[data-learning-ui] .llw-condition-nav:not(:disabled) {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 820px) {
    .llw-workspace:is([data-learning-ui="graphite-focus"], [data-learning-ui="luminous-deck"], [data-learning-ui="spatial-arena"]) .llw-condition-embedded-body,
    .llw-workspace:is([data-learning-ui="graphite-focus"], [data-learning-ui="luminous-deck"], [data-learning-ui="spatial-arena"]) .llw-condition-media {
        min-width: 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .llw-workspace:is([data-learning-ui="graphite-focus"], [data-learning-ui="luminous-deck"], [data-learning-ui="spatial-arena"]) .llw-condition-task-image {
        width: auto;
        height: auto;
        min-width: min(620px, 180vw);
        max-width: none;
        max-height: none;
    }
}

@media (max-width: 620px) {
    .llw-workspace[data-learning-ui="spatial-arena"] .llw-answer-panel {
        position: sticky;
        bottom: 4px;
    }
}

/* Three-variant learning comparison, cycle 1: shared semantics with distinct compositions. */
.llw-learning-context {
    display: none;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) {
    --llw-active-energy: 137 203 255;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
)[data-active-tool-channel="code"] {
    --llw-active-energy: 65 190 255;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
)[data-active-tool-channel="graphics"] {
    --llw-active-energy: 190 111 255;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
)[data-active-tool-channel="text"] {
    --llw-active-energy: 129 140 248;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
)[data-active-tool-channel="table"] {
    --llw-active-energy: 66 211 166;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-learning-context {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--llw-border);
    color: var(--llw-ink);
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-context-route,
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-context-topic,
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-context-task-readout {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 3px;
}

.llw-context-route {
    justify-items: center;
}

.llw-context-route-code,
.llw-context-eyebrow,
.llw-chronometer-mode,
.llw-time-limit {
    color: var(--llw-muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.llw-context-mode {
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: #b7c9dc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.llw-context-mode[data-mode="lesson"] { color: #8ae6ff; }
.llw-context-mode[data-mode="hard"] { color: #ffca78; }
.llw-context-mode[data-mode="exam"] { color: #df9cff; }

.llw-context-topic-name,
.llw-context-task-number {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-context-topic-name {
    font-size: clamp(13px, 1.2vw, 17px);
}

.llw-context-task {
    display: grid;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 5px;
}

.llw-context-task-readout {
    text-align: center;
}

.llw-context-task-number {
    font-size: clamp(15px, 1.5vw, 21px);
    font-variant-numeric: tabular-nums;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) :is(.llw-context-nav, .llw-context-switch) {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #45576f;
    color: #dcecff;
    background: #142032;
    font-weight: 900;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) :is(.llw-context-nav, .llw-context-switch):disabled {
    opacity: .34;
}

.llw-context-progress {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 5px;
}

.llw-context-progress-track,
.llw-time-progress-track {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid #3d4c61;
    background: #07101a;
}

.llw-context-progress-track {
    height: 6px;
    border-radius: 999px;
}

.llw-context-progress-track::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--llw-task-progress, 0%);
    background: rgb(var(--llw-active-energy) / 85%);
    box-shadow: 0 0 12px rgb(var(--llw-active-energy) / 52%);
    content: "";
    transition: width 180ms ease-out;
}

.llw-context-progress-copy {
    min-width: 0;
    overflow: hidden;
    color: var(--llw-muted);
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The visible control surface is icon-only. Names remain in the accessibility tree. */
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-copy,
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-office-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    overflow: visible;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab {
    --llw-tool-energy: 149 170 196;
    isolation: isolate;
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    flex: 0 0 52px;
    justify-content: center;
    padding: 0;
    overflow: visible;
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgb(255 255 255 / 8%), transparent 34%),
        linear-gradient(180deg, #263244, #151e2b 62%, #101722);
    box-shadow:
        0 5px 0 #070b11,
        0 9px 18px rgb(0 0 0 / 35%),
        inset 0 1px 0 rgb(255 255 255 / 10%),
        inset 0 -1px 0 rgb(0 0 0 / 70%);
    transform: translateY(0);
}

.llw-tool-tab[data-tool-channel="code"] { --llw-tool-energy: 65 190 255; }
.llw-tool-tab[data-tool-channel="graphics"] { --llw-tool-energy: 190 111 255; }
.llw-tool-tab[data-tool-channel="text"] { --llw-tool-energy: 129 140 248; }
.llw-tool-tab[data-tool-channel="table"] { --llw-tool-energy: 66 211 166; }
.llw-tool-tab[data-tool-channel="office"] { --llw-tool-energy: 118 126 151; }

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab::before {
    position: absolute;
    z-index: -1;
    inset: 5px;
    border: 1px solid rgb(var(--llw-tool-energy) / 18%);
    border-radius: 8px;
    background: radial-gradient(circle at 50% 75%, rgb(var(--llw-tool-energy) / 12%), transparent 68%);
    content: "";
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab[aria-pressed="true"] {
    border-color: rgb(var(--llw-tool-energy) / 88%);
    color: #fff;
    background:
        linear-gradient(145deg, rgb(255 255 255 / 12%), transparent 35%),
        linear-gradient(180deg, #314258, #1c2939);
    box-shadow:
        0 8px 0 #070b11,
        0 13px 24px rgb(0 0 0 / 44%),
        0 0 22px rgb(var(--llw-tool-energy) / 18%),
        inset 0 1px 0 rgb(255 255 255 / 15%);
    transform: translateY(-3px);
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab[aria-disabled="true"] {
    border-style: solid;
    opacity: .46;
    filter: saturate(.25);
    transform: translateY(3px);
    box-shadow: 0 2px 0 #070b11, inset 0 2px 5px rgb(0 0 0 / 55%);
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-active-mark {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: block;
    width: 7px;
    height: 7px;
    overflow: hidden;
    border: 1px solid rgb(var(--llw-tool-energy) / 80%);
    border-radius: 2px;
    color: transparent;
    background: rgb(var(--llw-tool-energy) / 24%);
    opacity: .35;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab[aria-pressed="true"] .llw-tool-active-mark {
    display: block;
    background: rgb(var(--llw-tool-energy));
    box-shadow: 0 0 9px rgb(var(--llw-tool-energy) / 78%);
    opacity: 1;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab::after {
    position: absolute;
    z-index: 120;
    top: calc(100% + 12px);
    left: 50%;
    width: max-content;
    max-width: min(230px, 75vw);
    padding: 6px 8px;
    pointer-events: none;
    border: 1px solid rgb(var(--llw-tool-energy) / 54%);
    border-radius: 7px;
    color: #eff8ff;
    background: #07111c;
    box-shadow: 0 9px 24px rgb(0 0 0 / 55%);
    content: attr(data-tooltip);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity 120ms ease-out, transform 120ms ease-out;
    white-space: normal;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tool-tab:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tools {
    position: relative;
    min-width: 0;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-tools::before {
    position: absolute;
    z-index: 4;
    top: -1px;
    left: 8%;
    width: 84%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(var(--llw-active-energy) / 78%), transparent);
    box-shadow: 0 0 14px rgb(var(--llw-active-energy) / 38%);
    content: "";
}

/* Chronometer anatomy: readout, segmented rail and explicit limit. */
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-time-metric::before {
    display: none;
}

.llw-chronometer {
    min-width: 0;
    align-content: center;
}

.llw-chronometer-face {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.llw-chronometer-identity {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.llw-chronometer-readout {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.llw-chronometer-signal {
    padding: 2px 4px;
    border: 1px solid rgb(var(--llw-time-progress-color, 56 189 108) / 60%);
    border-radius: 3px;
    color: rgb(var(--llw-time-progress-color, 56 189 108));
    font-size: 7px;
    font-weight: 950;
    letter-spacing: .12em;
}

.llw-time-progress-track {
    height: 8px;
    border-radius: 2px;
}

.llw-time-progress-track::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--llw-time-progress, 0%);
    background: rgb(var(--llw-time-progress-color, 56 189 108));
    box-shadow: 0 0 12px rgb(var(--llw-time-progress-color, 56 189 108) / 52%);
    content: "";
    transition: width 350ms linear, background-color 350ms linear;
}

.llw-time-progress-track::after {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 8px, #07101a 8px 10px);
    content: "";
}

.llw-time-limit {
    justify-self: end;
    letter-spacing: .07em;
}

/* Graphite Focus: a quiet topic ledger beside a precision command module. */
.llw-workspace[data-learning-ui="graphite-focus"] .llw-workspace-content {
    grid-template-columns: minmax(300px, 1fr) minmax(430px, .95fr);
    align-items: start;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-learning-context {
    grid-template-columns: 72px minmax(150px, 1fr) minmax(190px, .72fr);
    grid-template-areas:
        "route topic task"
        "route progress switch";
    gap: 7px 12px;
    min-height: 132px;
    padding: 11px;
    border-radius: 13px;
    background:
        linear-gradient(110deg, rgb(255 255 255 / 3%), transparent 28%),
        #101720;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 7px 18px rgb(0 0 0 / 22%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-context-route {
    grid-area: route;
    border-right: 1px solid #313e4e;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-context-route-code {
    color: #e1ebf6;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-context-topic { grid-area: topic; }
.llw-workspace[data-learning-ui="graphite-focus"] .llw-context-task { grid-area: task; }
.llw-workspace[data-learning-ui="graphite-focus"] .llw-context-progress { grid-area: progress; }
.llw-workspace[data-learning-ui="graphite-focus"] .llw-context-switch {
    grid-area: switch;
    border-radius: 7px;
    background: linear-gradient(#293747, #17212d);
    box-shadow: 0 3px 0 #080c12, inset 0 1px 0 rgb(255 255 255 / 7%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-context-nav {
    border-radius: 7px;
    background: linear-gradient(#283646, #17212e);
    box-shadow: 0 3px 0 #070b10, inset 0 1px 0 rgb(255 255 255 / 7%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-metrics {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(105px, .58fr);
    min-height: 132px;
    padding: 8px;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-command-panel .llw-tool-picker {
    grid-column: 1 / -1;
}

.llw-workspace[data-learning-ui="graphite-focus"] :is(.llw-tools, .llw-condition-splitter, .llw-answer-panel) {
    grid-column: 1 / -1;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-chronometer {
    border-right: 1px solid #344153;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-time-progress-track {
    height: 5px;
    border-radius: 0;
}

/* Luminous Deck: a continuous electronic route deck above the work well. */
.llw-workspace[data-learning-ui="luminous-deck"] .llw-learning-context {
    grid-template-columns: 74px minmax(220px, 1.35fr) minmax(220px, .8fr) minmax(150px, .7fr) 72px;
    grid-template-areas: "route topic task progress switch";
    align-items: stretch;
    gap: 8px;
    min-height: 82px;
    padding: 8px;
    border-color: #2b5f7d;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgb(54 211 255 / 7%), transparent 28%, rgb(155 111 255 / 8%)),
        linear-gradient(180deg, #102a3d, #091724);
    box-shadow: inset 0 1px 0 rgb(123 229 255 / 14%), 0 9px 24px rgb(0 15 29 / 28%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-learning-context::before {
    position: absolute;
    inset: auto 8% 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #45dcff, #9e7bff, transparent);
    box-shadow: 0 0 15px rgb(69 220 255 / 45%);
    content: "";
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-context-route { grid-area: route; }
.llw-workspace[data-learning-ui="luminous-deck"] .llw-context-topic {
    grid-area: topic;
    padding-left: 12px;
    border-left: 1px solid #2b5f7d;
}
.llw-workspace[data-learning-ui="luminous-deck"] .llw-context-task { grid-area: task; }
.llw-workspace[data-learning-ui="luminous-deck"] .llw-context-progress { grid-area: progress; }
.llw-workspace[data-learning-ui="luminous-deck"] .llw-context-switch {
    grid-area: switch;
    border-color: #396e8b;
    border-radius: 11px;
    background: linear-gradient(180deg, #1b455e, #10283a);
    box-shadow: inset 0 1px 0 rgb(125 228 255 / 15%), 0 0 16px rgb(69 220 255 / 10%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-context-nav {
    border-color: #376985;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #24516b, #10283a 68%);
    box-shadow: inset 0 1px 0 rgb(125 228 255 / 18%), 0 0 12px rgb(69 220 255 / 9%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-metrics {
    display: grid;
    grid-template-columns: minmax(180px, .75fr) minmax(110px, .42fr) minmax(390px, 1.55fr);
    min-height: 82px;
    align-items: stretch;
    padding: 7px;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-command-panel .llw-tool-picker {
    grid-column: 3;
    padding-left: 10px;
    border-left: 1px solid #285777;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-command-panel .llw-condition-restore {
    grid-column: 1 / -1;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tool-tab {
    border-color: rgb(var(--llw-tool-energy) / 28%);
    background:
        radial-gradient(circle at 50% 76%, rgb(var(--llw-tool-energy) / 13%), transparent 48%),
        linear-gradient(180deg, #17384d, #0e2231);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tool-tab[aria-pressed="true"] {
    box-shadow:
        0 7px 0 #06101a,
        0 0 24px rgb(var(--llw-tool-energy) / 30%),
        inset 0 1px 0 rgb(255 255 255 / 18%),
        inset 0 -3px 0 rgb(var(--llw-tool-energy) / 78%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-time-progress-track {
    height: 8px;
    border-radius: 999px;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-readout .llw-metric-value {
    color: #e4fbff;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 1.25rem;
    letter-spacing: .06em;
    text-shadow: 0 0 13px rgb(69 220 255 / 34%);
}

/* Spatial Arena: mission controls stay on the far plane; the editor owns the near plane. */
.llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-content {
    grid-template-columns: minmax(214px, 238px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-items: start;
    gap: 13px;
    perspective: 1200px;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-learning-context {
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    grid-template-areas:
        "route"
        "topic"
        "task"
        "progress"
        "switch";
    gap: 11px;
    padding: 13px;
    border-color: #343b5b;
    border-radius: 6px 18px 6px 18px;
    background:
        linear-gradient(145deg, rgb(106 168 255 / 8%), transparent 34%),
        #0c1120;
    box-shadow: 8px 11px 0 #050710, 14px 18px 34px rgb(0 0 0 / 42%), inset 0 1px 0 rgb(255 255 255 / 5%);
    transform: translateZ(-18px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-context-route {
    grid-area: route;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    padding-bottom: 9px;
    border-bottom: 1px solid #343b5b;
}
.llw-workspace[data-learning-ui="spatial-arena"] .llw-context-topic { grid-area: topic; }
.llw-workspace[data-learning-ui="spatial-arena"] .llw-context-task { grid-area: task; }
.llw-workspace[data-learning-ui="spatial-arena"] .llw-context-progress { grid-area: progress; }
.llw-workspace[data-learning-ui="spatial-arena"] .llw-context-switch {
    grid-area: switch;
    border-color: #59648f;
    border-radius: 3px 11px 3px 11px;
    background: #171d34;
    box-shadow: 5px 5px 0 #080a14;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-context-nav {
    border-color: #4c557d;
    border-radius: 3px 10px 3px 10px;
    background: #171d34;
    box-shadow: 4px 4px 0 #080a14;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-metrics {
    z-index: 4;
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 9px;
    border-radius: 5px 16px 5px 16px;
    box-shadow: 8px 10px 0 #050710, 13px 17px 30px rgb(0 0 0 / 36%);
    transform: translateZ(8px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-command-panel .llw-tool-picker,
.llw-workspace[data-learning-ui="spatial-arena"] .llw-command-panel .llw-condition-restore {
    grid-column: 1;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-command-panel .llw-tool-picker {
    padding-top: 9px;
    border-top: 1px solid #343c5c;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tabs {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    justify-content: center;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tab {
    clip-path: none;
    border-radius: 3px 12px 3px 12px;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tools {
    z-index: 9;
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    min-height: 620px;
    border-radius: 7px 20px 7px 20px;
    box-shadow: 14px 18px 0 #050710, 24px 30px 58px rgb(0 0 0 / 52%), inset 0 1px 0 rgb(126 171 255 / 9%);
    transform: translateZ(30px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-condition-splitter {
    grid-column: 2;
    grid-row: 3;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-answer-panel {
    grid-column: 1 / -1;
    grid-row: 4;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-time-progress-track {
    height: 10px;
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-chronometer-readout .llw-metric-value {
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 1.18rem;
    letter-spacing: .08em;
}

.llw-workspace[data-learning-ui="spatial-arena"].is-learning-tool-transitioning .llw-tools {
    animation: llw-spatial-plane-lock 360ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes llw-spatial-plane-lock {
    from { transform: translateZ(18px) translateY(5px); filter: brightness(.82); }
    58% { transform: translateZ(34px) translateY(-2px); filter: brightness(1.12); }
    to { transform: translateZ(30px); filter: none; }
}

@media (max-width: 1120px) {
    .llw-workspace[data-learning-ui="graphite-focus"] .llw-workspace-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .llw-workspace[data-learning-ui="graphite-focus"] :is(.llw-learning-context, .llw-metrics) {
        grid-column: 1;
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-metrics {
        grid-template-columns: minmax(170px, .7fr) minmax(110px, .4fr) minmax(360px, 1.45fr);
    }
}

@media (max-width: 900px) {
    .llw-workspace[data-learning-ui="luminous-deck"] .llw-learning-context {
        grid-template-columns: 64px minmax(190px, 1fr) minmax(190px, .75fr) 70px;
        grid-template-areas:
            "route topic task switch"
            "route progress progress switch";
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-metrics {
        grid-template-columns: minmax(160px, 1fr) minmax(105px, .55fr);
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-command-panel .llw-tool-picker {
        grid-column: 1 / -1;
        padding-left: 5px;
        border-top: 1px solid #285777;
        border-left: 0;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-content {
        grid-template-columns: minmax(190px, 214px) minmax(0, 1fr);
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tabs {
        grid-template-columns: repeat(2, 52px);
    }
}

@media (max-width: 820px) {
    .llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        perspective: none;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] :is(
        .llw-learning-context,
        .llw-metrics,
        .llw-tools,
        .llw-condition-splitter,
        .llw-answer-panel
    ) {
        grid-column: 1;
        grid-row: auto;
        transform: none;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-learning-context {
        grid-template-columns: 64px minmax(0, 1fr) minmax(180px, .8fr) 68px;
        grid-template-areas:
            "route topic task switch"
            "route progress progress switch";
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-metrics {
        grid-template-columns: minmax(150px, 1fr) minmax(100px, .55fr) minmax(260px, 1.4fr);
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-command-panel .llw-tool-picker {
        grid-column: 3;
        padding-top: 0;
        border-top: 0;
        border-left: 1px solid #343c5c;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tabs {
        display: flex;
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-learning-context {
        grid-template-columns: 54px minmax(0, 1fr) 58px;
        grid-template-areas:
            "route topic switch"
            "task task task"
            "progress progress progress";
        min-height: 0;
        gap: 7px;
        padding: 8px;
        border-radius: 12px;
        transform: none;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-context-route {
        grid-area: route;
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0;
        border: 0;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-context-topic {
        grid-area: topic;
        padding: 0;
        border: 0;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-context-task { grid-area: task; }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-context-progress { grid-area: progress; }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-context-switch {
        grid-area: switch;
        width: 58px;
        padding: 0 4px;
        font-size: 10px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-context-topic-name {
        font-size: 13px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-metrics {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(92px, .52fr);
        min-height: 0;
        padding: 6px;
        transform: none;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-command-panel .llw-tool-picker {
        grid-column: 1 / -1;
        padding: 8px 2px 2px;
        border-top: 1px solid var(--llw-border);
        border-left: 0;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-tool-tabs {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(7, minmax(44px, 1fr));
        gap: 4px;
        overflow: visible;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-tool-tab {
        width: 100%;
        min-width: 44px;
        height: 48px;
        min-height: 48px;
        flex-basis: auto;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-tool-tab::after {
        display: none;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tools {
        min-height: 500px;
    }
}

.llw-workspace[data-learning-motion="reduced"] .llw-context-progress-track::before,
.llw-workspace[data-learning-motion="reduced"] .llw-time-progress-track::before {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .llw-context-progress-track::before,
    .llw-time-progress-track::before {
        transition: none;
    }
}

/* Cycle 1 geometry correction: the new context row shifts the legacy four-row grid. */
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) {
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) :is(button, input, select, textarea) {
    font-family: inherit;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-editor {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-theme-id {
    display: none;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-workspace-content,
.llw-workspace[data-learning-ui="luminous-deck"] .llw-workspace-content.has-manual-ide-height,
.llw-workspace[data-learning-ui="luminous-deck"] .llw-workspace-content.is-embedded-condition {
    grid-template-rows:
        auto
        auto
        minmax(320px, var(--llw-work-area-height, 1fr))
        10px
        minmax(108px, auto);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-content,
.llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-content.has-manual-ide-height,
.llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-content.is-embedded-condition {
    grid-template-rows: auto auto 10px minmax(108px, auto);
}

/* Override the old synthetic-only fixed 116/116/420 command strip. */
.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel {
    height: auto;
    min-height: 82px;
    max-height: none;
    overflow: visible;
}

.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-tool-picker,
.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-condition-restore {
    grid-column: 1 / -1;
}

.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-tool-picker {
    height: auto;
    padding: 5px;
}

.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-tool-tab {
    height: 52px;
    min-height: 52px;
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="graphite-focus"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel {
    grid-template-columns: minmax(150px, 1fr) minmax(105px, .58fr);
    min-height: 132px;
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="luminous-deck"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel {
    grid-template-columns: minmax(180px, .75fr) minmax(110px, .42fr) minmax(390px, 1.55fr);
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="luminous-deck"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel .llw-tool-picker {
    grid-column: 3;
    padding-left: 10px;
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="spatial-arena"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="spatial-arena"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel .llw-tool-picker {
    grid-column: 1;
    padding-top: 9px;
}

.llw-workspace[data-learning-preview="synthetic"]:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-code-tool {
    height: min(var(--llw-ide-height, 560px), 470px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tools {
    min-height: 500px;
}

@media (max-width: 1120px) {
    .llw-workspace[data-learning-ui="graphite-focus"] .llw-workspace-content,
    .llw-workspace[data-learning-ui="graphite-focus"] .llw-workspace-content.has-manual-ide-height,
    .llw-workspace[data-learning-ui="graphite-focus"] .llw-workspace-content.is-embedded-condition {
        grid-template-rows:
            auto
            auto
            minmax(320px, var(--llw-work-area-height, 1fr))
            10px
            minmax(108px, auto);
    }
}

@media (max-width: 900px) {
    .llw-workspace[data-learning-preview="synthetic"][data-learning-ui="luminous-deck"]:is(
        [data-active-tool="code"], [data-active-tool="drawing"]
    ) .llw-command-panel {
        grid-template-columns: minmax(160px, 1fr) minmax(105px, .55fr);
    }

    .llw-workspace[data-learning-preview="synthetic"][data-learning-ui="luminous-deck"]:is(
        [data-active-tool="code"], [data-active-tool="drawing"]
    ) .llw-command-panel .llw-tool-picker {
        grid-column: 1 / -1;
        padding-left: 5px;
    }
}

@media (max-width: 820px) {
    .llw-workspace[data-learning-preview="synthetic"][data-learning-ui="spatial-arena"]:is(
        [data-active-tool="code"], [data-active-tool="drawing"]
    ) .llw-command-panel {
        grid-template-columns: minmax(150px, 1fr) minmax(100px, .55fr) minmax(260px, 1.4fr);
    }

    .llw-workspace[data-learning-preview="synthetic"][data-learning-ui="spatial-arena"]:is(
        [data-active-tool="code"], [data-active-tool="drawing"]
    ) .llw-command-panel .llw-tool-picker {
        grid-column: 3;
        padding-top: 0;
    }
}

@media (max-width: 620px) {
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-workspace-content,
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-workspace-content.has-manual-ide-height,
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-workspace-content.is-embedded-condition {
        grid-template-rows: auto auto auto 10px auto;
    }

    .llw-workspace[data-learning-preview="synthetic"]:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel {
        grid-template-columns: minmax(0, 1fr) minmax(92px, .52fr);
        min-height: 0;
    }

    .llw-workspace[data-learning-preview="synthetic"]:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ):is([data-active-tool="code"], [data-active-tool="drawing"]) .llw-command-panel .llw-tool-picker {
        grid-column: 1 / -1;
        padding: 8px 2px 2px;
    }

    .llw-workspace[data-learning-preview="synthetic"]:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-code-tool {
        height: auto;
    }
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-command-panel .llw-chronometer,
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-command-panel .llw-benchmark-metric {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 5px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"]
) .llw-metrics {
    position: relative;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"]
) .llw-command-panel .llw-tool-picker {
    padding-right: 58px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"]
) .llw-command-panel .llw-condition-restore {
    position: absolute;
    z-index: 8;
    right: 9px;
    bottom: 10px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    grid-column: auto;
    padding: 0;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"]
) .llw-condition-restore-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="graphite-focus"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel,
.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="luminous-deck"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel {
    min-height: 132px;
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="luminous-deck"]:is(
    [data-active-tool="code"], [data-active-tool="drawing"]
) .llw-command-panel {
    min-height: 82px;
}

.llw-workspace[data-learning-preview="synthetic"][data-learning-ui="luminous-deck"] .llw-code-tool {
    height: min(var(--llw-ide-height, 560px), 390px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-chronometer-face {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-chronometer-readout {
    justify-content: space-between;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-time-limit {
    justify-self: start;
}

@media (max-width: 620px) {
    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"]
    ) .llw-command-panel .llw-condition-restore {
        position: static;
        width: auto;
        min-width: 44px;
        grid-column: 1 / -1;
        justify-self: end;
        padding: 0 10px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"]
    ) .llw-command-panel .llw-tool-picker {
        padding-right: 2px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"]
    ) .llw-condition-restore-label {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-chronometer-face {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-chronometer-readout {
        justify-content: space-between;
    }
}

/* Cycle 2: material stack, energy channels and three genuinely different timers. */
.llw-workspace[data-learning-ui="graphite-focus"] :is(
    .llw-navigation,
    .llw-learning-context,
    .llw-metrics,
    .llw-tools,
    .llw-answer-panel
) {
    background-image:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 2.7%) .7px, transparent .8px),
        linear-gradient(145deg, rgb(255 255 255 / 2.5%), transparent 38%);
    background-size: 4px 4px, 100% 100%;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-learning-context::before,
.llw-workspace[data-learning-ui="graphite-focus"] .llw-metrics::before {
    position: absolute;
    inset: 6px;
    pointer-events: none;
    background:
        radial-gradient(circle at 2px 2px, #070a0f 0 2px, #596474 2.4px 3px, transparent 3.4px),
        radial-gradient(circle at calc(100% - 2px) 2px, #070a0f 0 2px, #596474 2.4px 3px, transparent 3.4px),
        radial-gradient(circle at 2px calc(100% - 2px), #070a0f 0 2px, #596474 2.4px 3px, transparent 3.4px),
        radial-gradient(circle at calc(100% - 2px) calc(100% - 2px), #070a0f 0 2px, #596474 2.4px 3px, transparent 3.4px);
    content: "";
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tool-tab {
    border-color: #465467;
    background:
        radial-gradient(circle at 50% 82%, rgb(var(--llw-tool-energy) / 9%), transparent 45%),
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / 3%) .6px, transparent .8px),
        linear-gradient(155deg, #303c4c, #1b2532 58%, #111821);
    background-size: 100% 100%, 4px 4px, 100% 100%;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tool-tab[aria-pressed="true"] {
    border-color: rgb(var(--llw-tool-energy) / 72%);
    box-shadow:
        0 8px 0 #06090e,
        0 12px 20px rgb(0 0 0 / 48%),
        0 4px 20px rgb(var(--llw-tool-energy) / 15%),
        inset 0 1px 0 rgb(255 255 255 / 16%),
        inset 0 -2px 0 rgb(var(--llw-tool-energy) / 45%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-tools {
    border-top-color: rgb(var(--llw-active-energy) / 55%);
    box-shadow:
        0 10px 22px rgb(0 0 0 / 28%),
        inset 0 1px 0 rgb(255 255 255 / 4%),
        inset 0 2px 22px rgb(var(--llw-active-energy) / 3%);
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-chronometer-face {
    padding-bottom: 5px;
    border-bottom: 1px solid #344153;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-chronometer-readout .llw-metric-value {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 1.16rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

.llw-workspace[data-learning-ui="graphite-focus"] .llw-time-progress-track {
    border-color: #4c5868;
    background: #080c12;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 85%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-workspace-stage {
    border-color: rgb(var(--llw-active-energy) / 32%);
    background:
        radial-gradient(circle at 78% 0, rgb(145 91 255 / 13%), transparent 34%),
        radial-gradient(circle at 0 72%, rgb(32 198 255 / 10%), transparent 28%),
        linear-gradient(180deg, #081623, #050d16);
    box-shadow:
        inset 0 1px 0 rgb(117 224 255 / 10%),
        inset 0 0 45px rgb(var(--llw-active-energy) / 3%),
        0 13px 34px rgb(0 15 29 / 28%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tools {
    border-color: rgb(var(--llw-active-energy) / 42%);
    background:
        linear-gradient(90deg, rgb(var(--llw-active-energy) / 4%), transparent 18% 82%, rgb(var(--llw-active-energy) / 3%)),
        #081521;
    box-shadow:
        inset 0 1px 0 rgb(132 230 255 / 9%),
        inset 0 0 34px rgb(var(--llw-active-energy) / 4%),
        0 12px 30px rgb(0 13 24 / 28%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tool-tab::before {
    inset: 7px;
    border-color: rgb(var(--llw-tool-energy) / 28%);
    background:
        radial-gradient(circle at 50% 70%, rgb(var(--llw-tool-energy) / 20%), transparent 66%),
        #0a1a27;
    box-shadow: inset 0 2px 6px rgb(0 0 0 / 62%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-tool-tab[aria-pressed="true"]::before {
    border-color: rgb(var(--llw-tool-energy) / 72%);
    background: radial-gradient(circle at 50% 58%, rgb(var(--llw-tool-energy) / 36%), #0a1a27 72%);
    box-shadow:
        inset 0 2px 4px rgb(0 0 0 / 42%),
        0 0 15px rgb(var(--llw-tool-energy) / 34%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "face limit"
        "rail rail";
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-face {
    grid-area: face;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-time-progress-track {
    grid-area: rail;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-time-limit {
    grid-area: limit;
    align-self: start;
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-readout {
    position: relative;
    isolation: isolate;
    min-width: 92px;
    min-height: 58px;
    justify-content: center;
    padding: 8px 10px;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle, #0a1b29 0 58%, transparent 60%),
        conic-gradient(
            from -90deg,
            rgb(var(--llw-time-progress-color, 56 189 108)) 0 var(--llw-time-progress, 0%),
            #1c3850 var(--llw-time-progress, 0%) 100%
        );
    box-shadow:
        inset 0 0 13px rgb(0 0 0 / 68%),
        0 0 18px rgb(var(--llw-time-progress-color, 56 189 108) / 13%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-readout::before {
    position: absolute;
    z-index: -1;
    inset: 5px;
    border: 1px solid rgb(var(--llw-time-progress-color, 56 189 108) / 32%);
    border-radius: 50%;
    background: #091723;
    content: "";
}

.llw-workspace[data-learning-ui="luminous-deck"].is-learning-tool-transitioning .llw-metrics::after {
    position: absolute;
    z-index: 20;
    right: 7px;
    bottom: -2px;
    left: 7px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(var(--llw-active-energy)), transparent);
    box-shadow: 0 0 14px rgb(var(--llw-active-energy) / 72%);
    content: "";
    animation: llw-luminous-tool-current 340ms cubic-bezier(.2, .8, .2, 1) both;
    transform-origin: left center;
}

@keyframes llw-luminous-tool-current {
    from { opacity: 0; transform: scaleX(.04); }
    42% { opacity: 1; }
    to { opacity: 0; transform: scaleX(1); }
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-learning-context {
    border-left-color: rgb(var(--llw-active-energy) / 64%);
    box-shadow:
        8px 11px 0 #050710,
        14px 18px 34px rgb(0 0 0 / 42%),
        -2px 0 18px rgb(var(--llw-active-energy) / 7%),
        inset 0 1px 0 rgb(255 255 255 / 5%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-metrics {
    border-top-color: rgb(var(--llw-active-energy) / 48%);
    box-shadow:
        8px 10px 0 #050710,
        13px 17px 30px rgb(0 0 0 / 36%),
        -2px 0 16px rgb(var(--llw-active-energy) / 6%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tools {
    border-color: rgb(var(--llw-active-energy) / 42%);
    background:
        linear-gradient(135deg, rgb(var(--llw-active-energy) / 7%), transparent 26%),
        linear-gradient(315deg, rgb(255 199 102 / 4%), transparent 24%),
        #0b1121;
    box-shadow:
        14px 18px 0 #050710,
        24px 30px 58px rgb(0 0 0 / 52%),
        0 0 26px rgb(var(--llw-active-energy) / 7%),
        inset 0 1px 0 rgb(126 171 255 / 9%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tools::after {
    position: absolute;
    z-index: -1;
    top: 16px;
    right: -10px;
    bottom: -10px;
    width: 10px;
    pointer-events: none;
    background: linear-gradient(180deg, #29345a, #080b16);
    clip-path: polygon(0 0, 100% 8px, 100% 100%, 0 calc(100% - 8px));
    content: "";
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-chronometer {
    padding: 8px;
    border: 1px solid #3b4365;
    background: linear-gradient(145deg, #151a31, #0b0f1d);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-chronometer-signal {
    border-radius: 0;
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-benchmark-metric {
    padding: 8px;
    border-top: 1px solid #343c5c;
    border-right: 0;
}

.llw-workspace[data-learning-motion="reduced"] .llw-metrics::after,
.llw-workspace[data-learning-motion="reduced"] .llw-tools::after {
    animation: none !important;
}

.llw-workspace[data-learning-motion="reduced"][data-learning-ui="luminous-deck"] .llw-metrics::after {
    display: none;
    content: none;
}

@media (max-width: 820px) {
    .llw-workspace[data-learning-ui="spatial-arena"] .llw-workspace-content {
        perspective: 900px;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-learning-context {
        box-shadow: 0 5px 0 #050710, 0 11px 24px rgb(0 0 0 / 34%);
        transform: translateZ(2px);
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-metrics {
        box-shadow: 0 7px 0 #050710, 0 13px 28px rgb(0 0 0 / 38%);
        transform: translateZ(5px);
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tools {
        box-shadow: 0 9px 0 #050710, 0 18px 34px rgb(0 0 0 / 42%);
        transform: translateZ(8px);
    }
}

@media (max-width: 620px) {
    .llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "face"
            "rail"
            "limit";
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-readout {
        min-width: 82px;
        min-height: 52px;
        justify-self: start;
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-time-limit {
        justify-self: start;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tools::after {
        right: -5px;
        bottom: -5px;
        width: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .llw-workspace[data-learning-ui="luminous-deck"] .llw-metrics::after {
        display: none;
        content: none;
    }
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tabs {
    grid-template-columns: repeat(4, 44px);
    gap: 6px;
}

.llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tab {
    width: 44px;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
    flex-basis: 44px;
}

@media (max-width: 820px) {
    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tabs {
        display: flex;
        gap: 6px;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tab {
        width: 52px;
        min-width: 52px;
        height: 52px;
        min-height: 52px;
        flex-basis: 52px;
    }
}

@media (max-width: 620px) {
    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tabs {
        display: grid;
        grid-template-columns: repeat(7, minmax(44px, 1fr));
        gap: 4px;
    }

    .llw-workspace[data-learning-ui="spatial-arena"] .llw-tool-tab {
        width: 100%;
        min-width: 44px;
        height: 48px;
        min-height: 48px;
        flex-basis: auto;
    }
}

/* Cycle 3 polish: stable task numerals, transition intent and positive depth ladder. */
.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-task-label {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 1px;
    line-height: 1;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-task-prefix {
    color: var(--llw-muted);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-task-number {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-learning-layout {
    perspective: 1400px;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-workspace-content {
    align-content: start;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-navigation {
    z-index: 2;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-workspace-stage {
    z-index: 8;
}

.llw-workspace:is(
    [data-learning-ui="graphite-focus"],
    [data-learning-ui="luminous-deck"],
    [data-learning-ui="spatial-arena"]
) .llw-answer-panel {
    z-index: 18;
}

.llw-workspace[data-learning-tool-from="neutral"] { --llw-transition-from: 149 170 196; }
.llw-workspace[data-learning-tool-from="code"] { --llw-transition-from: 65 190 255; }
.llw-workspace[data-learning-tool-from="text"] { --llw-transition-from: 129 140 248; }
.llw-workspace[data-learning-tool-from="table"] { --llw-transition-from: 66 211 166; }
.llw-workspace[data-learning-tool-from="graphics"] { --llw-transition-from: 190 111 255; }
.llw-workspace[data-learning-tool-to="neutral"] { --llw-transition-to: 149 170 196; }
.llw-workspace[data-learning-tool-to="code"] { --llw-transition-to: 65 190 255; }
.llw-workspace[data-learning-tool-to="text"] { --llw-transition-to: 129 140 248; }
.llw-workspace[data-learning-tool-to="table"] { --llw-transition-to: 66 211 166; }
.llw-workspace[data-learning-tool-to="graphics"] { --llw-transition-to: 190 111 255; }

.llw-workspace[data-learning-ui="luminous-deck"].is-learning-tool-transitioning .llw-metrics::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgb(var(--llw-transition-from, var(--llw-active-energy))) 28%,
        rgb(var(--llw-transition-to, var(--llw-active-energy))) 72%,
        transparent
    );
    box-shadow:
        0 0 10px rgb(var(--llw-transition-from, var(--llw-active-energy)) / 45%),
        0 0 17px rgb(var(--llw-transition-to, var(--llw-active-energy)) / 58%);
}

.llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-face {
    display: grid;
    grid-template-columns: minmax(74px, 1fr) 92px;
    align-items: center;
    gap: 7px;
}

.llw-workspace[data-learning-motion="low"] .llw-tool-tab,
.llw-workspace[data-learning-motion="low"] :is(.llw-learning-context, .llw-metrics, .llw-tools) {
    transition-duration: 120ms;
}

.llw-workspace[data-learning-motion="reduced"] .llw-tool-tab {
    transform: none;
}

.llw-workspace[data-learning-motion="reduced"] .llw-tool-tab[aria-pressed="true"] {
    transform: translateY(-3px);
}

@media (max-width: 620px) {
    .llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-face {
        grid-template-columns: minmax(58px, 1fr) 116px;
        gap: 4px;
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-readout {
        display: grid;
        min-width: 116px;
        place-items: center;
        padding: 6px;
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-readout .llw-metric-value {
        padding-top: 8px;
        font-size: 1rem;
        letter-spacing: .03em;
        white-space: nowrap;
    }

    .llw-workspace[data-learning-ui="luminous-deck"] .llw-chronometer-signal {
        position: absolute;
        top: 6px;
        left: 50%;
        padding: 0 3px;
        font-size: 5px;
        transform: translateX(-50%);
    }

    .llw-workspace:is(
        [data-learning-ui="graphite-focus"],
        [data-learning-ui="luminous-deck"],
        [data-learning-ui="spatial-arena"]
    ) .llw-task-prefix {
        font-size: 6px;
    }
}

@media (forced-colors: active) {
    .llw-learning-context,
    .llw-chronometer,
    .llw-time-progress-track,
    .llw-context-progress-track {
        border: 1px solid CanvasText;
        forced-color-adjust: auto;
    }

    .llw-context-progress-track::before,
    .llw-time-progress-track::before,
    .llw-tool-active-mark {
        background: Highlight;
    }
}

/* Site visual skin: static Tron presentation on the production workspace DOM. */
.llw-workspace[data-visual-skin="tron"],
.llw-fullscreen-overlay[data-visual-skin="tron"] {
    --llw-border: rgba(151, 183, 211, .19);
    --llw-ink: #eef8ff;
    --llw-muted: #aab9c8;
    --llw-active-energy: 85 239 255;
    --llw-tron-bg: #03050a;
    --llw-tron-graphite-0: #070a0f;
    --llw-tron-surface-1: #0c1118;
    --llw-tron-surface-2: #121923;
    --llw-tron-surface-3: #1a2330;
    --llw-tron-surface-4: #25313f;
    --llw-tron-line: rgba(151, 183, 211, .19);
    --llw-tron-line-bright: rgba(183, 221, 244, .43);
    --llw-tron-line-active: rgba(85, 239, 255, .42);
    --llw-tron-energy: #55efff;
    --llw-tron-focus: #fff28a;
    --llw-tron-grain:
        linear-gradient(117deg, rgba(255, 255, 255, .055), transparent 18%, transparent 79%, rgba(126, 170, 198, .035)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 10px),
        radial-gradient(circle at 24% 12%, rgba(82, 108, 130, .12), transparent 26%),
        #0e131b;
    --llw-tron-led-socket: linear-gradient(180deg, #071116 0, #020609 46%, #010305 100%);
    --llw-tron-led-socket-border: rgba(93, 133, 146, .3);
    --llw-tron-led-socket-shadow: inset 0 1px rgba(142, 182, 194, .1), inset 0 -2px 3px #000;
    --llw-tron-led-idle: linear-gradient(180deg, #0c1a1f 0 34%, #071115 36% 100%);
    --llw-tron-led-pre: linear-gradient(180deg, #58b9c9 0 34%, #245e69 36% 100%);
    --llw-tron-led-active: linear-gradient(180deg, #dffcff 0 34%, #36c9e2 36% 100%);
    --llw-tron-led-pre-bloom: 0 0 2px rgba(170, 239, 248, .28), 0 0 5px rgba(60, 199, 222, .18);
    --llw-tron-led-active-bloom: 0 0 2px rgba(223, 252, 255, .82), 0 0 6px rgba(54, 208, 233, .64), 0 0 10px rgba(54, 208, 233, .18);
    --llw-tron-led-transition: 150ms ease-out;
    --fusion-power-led-socket-height: 8px;
    --fusion-power-led-rail-height: 3px;
    --fusion-power-led-socket-fill: linear-gradient(180deg, #071116 0, #020609 46%, #010305 100%);
    --fusion-power-led-socket-border: rgba(93, 133, 146, .3);
    --fusion-power-led-socket-shadow: inset 0 1px rgba(142, 182, 194, .1), inset 0 -2px 3px #000;
    --fusion-power-led-idle-core: #0c1a1f;
    --fusion-power-led-idle-body: #071115;
    --fusion-power-led-idle-bloom: 0 0 0 rgba(0, 0, 0, 0);
    --fusion-power-led-pre-core: #58b9c9;
    --fusion-power-led-pre-body: #245e69;
    --fusion-power-led-pre-bloom: 0 0 2px rgba(170, 239, 248, .28), 0 0 5px rgba(60, 199, 222, .18);
    --fusion-power-led-active-core: #dffcff;
    --fusion-power-led-active-body: #36c9e2;
    --fusion-power-led-active-bloom: 0 0 2px rgba(223, 252, 255, .82), 0 0 6px rgba(54, 208, 233, .64), 0 0 10px rgba(54, 208, 233, .18);
    --fusion-power-led-transition: 150ms ease-out;
    color: var(--llw-ink);
    font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.llw-workspace[data-visual-skin="tron"] {
    position: relative;
    isolation: isolate;
    perspective: 1500px;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 76% -16%, rgba(54, 130, 177, .13), transparent 39%),
        radial-gradient(circle at 15% 116%, rgba(37, 151, 181, .12), transparent 42%),
        linear-gradient(145deg, #03060b 0%, #06101a 47%, #02070d 100%);
    box-shadow: none;
}

.llw-workspace[data-visual-skin="tron"]::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(100, 163, 194, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 163, 194, .022) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .92), transparent 96%);
    content: "";
}

.llw-workspace[data-visual-skin="tron"] > * {
    position: relative;
    z-index: 1;
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-layout {
    --llw-navigation-width: 258px;
    grid-template-columns: var(--llw-themes-pane-width, 258px) 12px minmax(520px, 1fr);
    column-gap: 4px;
}

.llw-workspace[data-visual-skin="tron"] .llw-workspace-content {
    grid-template-rows: 64px minmax(180px, var(--llw-work-area-height, 1fr)) 10px 112px;
    gap: 0;
    padding: 8px;
}

.llw-workspace[data-visual-skin="tron"] .llw-navigation {
    grid-template-rows: 42px minmax(0, 1fr);
    align-content: stretch;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-navigation-toggle {
    z-index: 58;
    width: 42px;
    height: 42px;
    justify-self: end;
}

.llw-workspace[data-visual-skin="tron"] .llw-theme-navigation-section {
    display: contents;
}

.llw-workspace[data-visual-skin="tron"] .llw-theme-navigation-section > .llw-panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-layout.is-navigation-collapsed .llw-navigation {
    grid-template-rows: 42px minmax(0, 1fr);
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-navigation-section,
    .llw-learning-context,
    .llw-command-panel,
    .llw-metric,
    .llw-tools,
    .llw-answer-panel
) {
    border-color: rgba(125, 153, 178, .24);
    border-radius: 10px;
    color: var(--llw-ink);
    background: var(--llw-tron-grain);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .07), inset 0 -7px 18px rgba(0, 0, 0, .42);
}

.llw-workspace[data-visual-skin="tron"] .llw-navigation-section:first-of-type {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-navigation-section:first-of-type > .llw-panel-title {
    margin: 4px 6px 8px;
    color: #aab9c8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-panel-title, .llw-heading-copy,
    .llw-context-topic-name, .llw-context-task-number, .llw-metric-value) {
    color: #eef8ff;
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-muted, .llw-empty,
    .llw-context-eyebrow, .llw-context-progress-copy, .llw-metric-label,
    .llw-metric small, .llw-time-limit, .llw-tool-hint, .llw-answer-status) {
    color: var(--llw-muted);
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-navigation-toggle,
    .llw-list-button,
    .llw-context-nav,
    .llw-context-switch,
    .llw-tool-tab,
    .llw-icon-button,
    .llw-primary-button,
    .llw-secondary-button
) {
    border-color: rgba(125, 156, 181, .18);
    border-radius: 7px;
    color: #92a2b0;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .045), transparent 28%),
        linear-gradient(180deg, #121923, #090d13);
    box-shadow: 0 3px 0 #030508, inset 0 3px 8px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .035);
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-navigation-toggle,
    .llw-list-button,
    .llw-context-nav,
    .llw-context-switch,
    .llw-tool-tab,
    .llw-icon-button,
    .llw-secondary-button
):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: rgba(116, 202, 224, .3);
    color: #e4f5fb;
    background: linear-gradient(180deg, #18232e, #0b1118);
    box-shadow: 0 6px 0 #030508, 0 12px 19px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .07);
}

.llw-workspace[data-visual-skin="tron"] .llw-theme-list.theme-list {
    position: relative;
    z-index: 54;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(122, 155, 180, .16);
    border-radius: 11px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 27%),
        linear-gradient(180deg, rgba(12, 17, 24, .96), rgba(5, 8, 13, .96));
    box-shadow: 0 20px 38px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .045), inset 0 0 25px rgba(0, 0, 0, .5);
    scrollbar-width: thin;
    scrollbar-color: rgba(104, 191, 216, .34) transparent;
}

.llw-workspace[data-visual-skin="tron"] .llw-theme-list.theme-list::before {
    position: sticky;
    z-index: 5;
    top: -8px;
    flex: 0 0 2px;
    margin: -8px 19% 1px;
    background: linear-gradient(90deg, transparent, var(--llw-mode-accent), var(--llw-mode-accent-2), transparent);
    box-shadow: 0 0 9px var(--llw-mode-glow);
    content: "";
    opacity: .45;
}

.llw-workspace[data-visual-skin="tron"] .theme-item {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    display: block;
    padding: 3px;
    border-radius: 9px;
    background: #05070b;
    box-shadow: inset 0 4px 9px #000;
    transform: translateZ(-5px);
}

.llw-workspace[data-visual-skin="tron"] .theme-item::before {
    content: none;
}

.llw-workspace[data-visual-skin="tron"] .theme-button {
    position: relative;
    z-index: 2;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 9px;
    padding: 0 11px 0 14px;
    overflow: visible;
    border: 1px solid rgba(125, 156, 181, .16);
    border-radius: 7px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .045), transparent 28%),
        linear-gradient(180deg, #121923, #090d13);
    color: #92a2b0;
    box-shadow: 0 3px 0 #030508, inset 0 3px 8px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .035);
    text-align: left;
    transform: translateY(1px) translateZ(-4px);
    transition: color 150ms, border-color 150ms, transform 220ms cubic-bezier(.2, 0, 0, 1), box-shadow 220ms, background 220ms;
}

.llw-workspace[data-visual-skin="tron"] .theme-button__label {
    display: flex;
    min-width: 0;
    align-items: baseline;
    overflow: hidden;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-workspace[data-visual-skin="tron"] .theme-button__number {
    flex: 0 0 auto;
    font: inherit;
}

.llw-workspace[data-visual-skin="tron"] .theme-button__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-workspace[data-visual-skin="tron"] .theme-item:not(.is-selected):hover .theme-button,
.llw-workspace[data-visual-skin="tron"] .theme-item:not(.is-selected) .theme-button:focus-visible {
    color: #e4f5fb;
    border-color: rgba(116, 202, 224, .3);
    transform: translateY(-2px) translateZ(8px);
    box-shadow: 0 6px 0 #030508, 0 12px 19px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .07);
}

.llw-workspace[data-visual-skin="tron"] .theme-button:active {
    transform: translateY(3px) translateZ(-10px);
    box-shadow: 0 1px 0 #020305, inset 0 6px 11px rgba(0, 0, 0, .64);
}

.llw-workspace[data-visual-skin="tron"] .theme-item.is-selected {
    z-index: 8;
    padding: 5px;
    border: 1px solid rgba(92, 190, 211, .24);
    background:
        radial-gradient(circle at 50% 42%, rgba(59, 166, 195, .075), transparent 62%),
        linear-gradient(150deg, rgba(95, 185, 205, .055), transparent 31%),
        linear-gradient(180deg, #091018, #04080d);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(180, 239, 249, .055), inset 0 0 30px rgba(28, 105, 130, .055);
    transform: translateZ(14px);
}

.llw-workspace[data-visual-skin="tron"] .theme-item.is-selected .theme-button {
    overflow: hidden;
    color: #fff;
    border-color: color-mix(in srgb, var(--llw-mode-accent) 42%, rgba(140, 170, 190, .24));
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .085), transparent 29%),
        linear-gradient(180deg, #202a36, #0d141d);
    box-shadow: 0 8px 0 #030508, 0 17px 24px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .1);
    transform: translateY(-4px) translateZ(24px);
}

.llw-workspace[data-visual-skin="tron"] .theme-item.is-selected .theme-button::after {
    content: none;
    display: none;
}

.llw-workspace[data-visual-skin="tron"] .theme-button__aperture {
    --fusion-power-led-core: var(--fusion-power-led-idle-core);
    --fusion-power-led-body: var(--fusion-power-led-idle-body);
    --fusion-power-led-bloom: var(--fusion-power-led-idle-bloom);
    position: absolute;
    z-index: 3;
    top: auto;
    right: 7px;
    bottom: 4px;
    left: auto;
    width: 32px;
    height: var(--fusion-power-led-socket-height);
    display: block;
    overflow: visible;
    border: 1px solid var(--fusion-power-led-socket-border);
    border-radius: 4px;
    background: var(--fusion-power-led-socket-fill);
    box-shadow: var(--fusion-power-led-socket-shadow);
    transform: none;
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] .theme-button__aperture::before {
    position: absolute;
    z-index: 1;
    inset: 2px;
    width: auto;
    height: var(--fusion-power-led-rail-height);
    border: 0;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--fusion-power-led-core) 0 34%, var(--fusion-power-led-body) 36% 100%);
    box-shadow: var(--fusion-power-led-bloom);
    content: "";
    transition: background var(--fusion-power-led-transition), box-shadow var(--fusion-power-led-transition);
}

.llw-workspace[data-visual-skin="tron"] .theme-item:not(.is-selected):hover .theme-button__aperture,
.llw-workspace[data-visual-skin="tron"] .theme-item:not(.is-selected) .theme-button:focus-visible > .theme-button__aperture {
    --fusion-power-led-core: var(--fusion-power-led-pre-core);
    --fusion-power-led-body: var(--fusion-power-led-pre-body);
    --fusion-power-led-bloom: var(--fusion-power-led-pre-bloom);
}

.llw-workspace[data-visual-skin="tron"] .theme-item.is-selected .theme-button__aperture {
    --fusion-power-led-core: var(--fusion-power-led-active-core);
    --fusion-power-led-body: var(--fusion-power-led-active-body);
    --fusion-power-led-bloom: var(--fusion-power-led-active-bloom);
}

.llw-workspace[data-visual-skin="tron"] .theme-tasks.llw-task-navigation-section {
    --task-key-size: 46px;
    --task-grid-columns: 3;
    --task-grid-column-gap: 16px;
    --task-grid-side-gutter: 18px;
    position: relative;
    z-index: 1;
    isolation: isolate;
    grid-template-columns: repeat(var(--task-grid-columns), var(--task-key-size));
    grid-auto-rows: var(--task-key-size);
    column-gap: var(--task-grid-column-gap);
    row-gap: 18px;
    justify-content: center;
    justify-items: start;
    align-content: start;
    gap: 18px var(--task-grid-column-gap);
    margin: 0;
    max-height: none;
    padding: 22px var(--task-grid-side-gutter) 30px;
    overflow: hidden;
    border: 1px solid rgba(106, 204, 224, .3);
    border-top-color: rgba(91, 177, 198, .18);
    border-radius: 0 0 7px 7px;
    background:
        linear-gradient(90deg, rgba(68, 159, 185, .045), transparent 17%, transparent 83%, rgba(68, 159, 185, .045)),
        radial-gradient(ellipse at 50% 42%, rgba(53, 155, 185, .065), transparent 72%),
        linear-gradient(180deg, #070d13, #04080c);
    box-shadow: inset 0 8px 15px rgba(0, 0, 0, .64), inset 0 -18px 28px rgba(48, 133, 158, .08), 0 9px 18px rgba(0, 0, 0, .3);
}

.llw-workspace[data-visual-skin="tron"] .theme-tasks.llw-task-grid[data-task-density="compact"] {
    column-gap: 14px;
    row-gap: 14px;
    gap: 14px;
    padding: 17px 14px 20px;
}

.llw-workspace[data-visual-skin="tron"] .theme-tasks.llw-task-grid[data-task-density="dense"] {
    row-gap: 17px;
}

.llw-workspace[data-visual-skin="tron"] .task-key {
    --fusion-power-led-core: var(--fusion-power-led-idle-core);
    --fusion-power-led-body: var(--fusion-power-led-idle-body);
    --fusion-power-led-bloom: var(--fusion-power-led-idle-bloom);
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: var(--task-key-size);
    min-width: var(--task-key-size);
    height: var(--task-key-size);
    min-height: var(--task-key-size);
    display: grid;
    place-items: center;
    gap: normal;
    padding: 0;
    border: 1px solid rgba(125, 156, 181, .19);
    border-radius: 7px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .045), transparent 27%),
        linear-gradient(180deg, #121a23, #060a0f);
    color: #91a2b1;
    box-shadow: 0 4px 0 #030508, inset 0 1px rgba(255, 255, 255, .05);
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    transform: translateY(0) translateZ(0);
    transition: color 150ms, border-color 150ms, transform 220ms cubic-bezier(.2, 0, 0, 1), box-shadow 220ms;
}

.llw-workspace[data-visual-skin="tron"] .task-key__label {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Fusion Thinking Droplets: one persistent selected-task canvas below label/LED. */
.llw-workspace[data-visual-skin="tron"] .llw-task-thinking-clip {
    position: absolute;
    z-index: 1;
    inset: 3px;
    overflow: hidden;
    border-radius: 4px;
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-thinking-emitter {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] .task-key .llw-task-prefix {
    display: none;
}

.llw-workspace[data-visual-skin="tron"] .task-key::after {
    position: absolute;
    z-index: 3;
    right: auto;
    bottom: 3px;
    left: 50%;
    width: 32px;
    height: var(--fusion-power-led-socket-height);
    border: 1px solid var(--fusion-power-led-socket-border);
    border-radius: 4px;
    background: var(--fusion-power-led-socket-fill);
    box-shadow: var(--fusion-power-led-socket-shadow);
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] .task-key::before {
    position: absolute;
    z-index: 4;
    right: auto;
    bottom: 6px;
    left: 50%;
    width: 26px;
    height: var(--fusion-power-led-rail-height);
    border: 0;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--fusion-power-led-core) 0 34%, var(--fusion-power-led-body) 36% 100%);
    box-shadow: var(--fusion-power-led-bloom);
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
    transition: background var(--fusion-power-led-transition), box-shadow var(--fusion-power-led-transition);
}

.llw-workspace[data-visual-skin="tron"] .task-key:not(.is-active):hover,
.llw-workspace[data-visual-skin="tron"] .task-key:not(.is-active):focus-visible {
    --fusion-power-led-core: var(--fusion-power-led-pre-core);
    --fusion-power-led-body: var(--fusion-power-led-pre-body);
    --fusion-power-led-bloom: var(--fusion-power-led-pre-bloom);
    color: #fff;
    border-color: rgba(149, 202, 221, .39);
    box-shadow: 0 7px 0 #030508, 0 12px 17px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .09);
    transform: translateY(-3px) translateZ(13px);
}

.llw-workspace[data-visual-skin="tron"] .task-key:active {
    transform: translateY(3px) translateZ(-8px);
    box-shadow: 0 1px 0 #020305, inset 0 5px 10px rgba(0, 0, 0, .62);
}

.llw-workspace[data-visual-skin="tron"] .theme-item.is-selected .task-key.is-active {
    --fusion-power-led-core: var(--fusion-power-led-active-core);
    --fusion-power-led-body: var(--fusion-power-led-active-body);
    --fusion-power-led-bloom: var(--fusion-power-led-active-bloom);
    color: #fff;
    border-width: 1px 2px 3px 1px;
    border-color: rgba(156, 226, 238, .44) rgba(62, 92, 104, .48) rgba(23, 35, 42, .92) rgba(105, 176, 192, .35);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .09), transparent 30%),
        linear-gradient(180deg, #1e2b35, #071016 74%);
    box-shadow: 0 6px 0 #020406, 0 11px 16px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .1), inset 0 -5px 8px rgba(0, 0, 0, .46);
    text-shadow: 0 0 9px var(--llw-mode-glow);
    transform: translateY(-6px) translateZ(26px);
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-layout.is-navigation-collapsed .theme-list {
    padding: 5px;
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-layout.is-navigation-collapsed .theme-item {
    padding: 2px;
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-layout.is-navigation-collapsed .theme-button {
    min-height: 46px;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
    text-align: center;
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-layout.is-navigation-collapsed :is(
    .theme-button__name,
    .theme-button__aperture
) {
    display: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-layout.is-navigation-collapsed .theme-tasks.llw-task-grid {
    --task-grid-columns: 1 !important;
    justify-content: center;
    column-gap: 5px;
    row-gap: 5px;
    padding: 10px 3px 7px;
}

/* Frozen Fusion Frame Power: task-local converging flashes, driven by one RAF revision. */
.llw-workspace[data-visual-skin="tron"] .llw-task-navigation-section {
    position: relative;
    isolation: isolate;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash {
    position: absolute;
    z-index: 5;
    overflow: hidden;
    contain: strict;
    opacity: 0;
    pointer-events: none;
    --llw-task-flash-energy: 0;
    --llw-task-flash-node-energy: 0;
    --llw-task-flash-node-scale: .75;
    --llw-task-flash-node-bloom: 0px;
    --llw-task-flash-travel-scale: .75;
    --llw-task-flash-travel-brightness: .45;
    --llw-task-flash-travel-glow: 4px;
    --llw-task-flash-travel-body: 72px;
    --llw-task-flash-travel-core-growth: 0px;
    --llw-task-flash-travel-opacity: 1;
    --llw-task-flash-edge-inset: 5px;
    --llw-task-flash-travel-light-opacity: 0;
    --llw-task-flash-travel-light-scale: .78;
    --llw-task-flash-merge-light-opacity: 0;
    --llw-task-flash-merge-light-scale: .76;
    --llw-task-flash-task-light-opacity: 0;
    --llw-task-flash-task-light-scale: .72;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash.is-running {
    opacity: 1;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__lighting {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 1px;
    pointer-events: none;
    will-change: transform, opacity;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light::before,
.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light::after {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--llw-task-flash-light-diameter);
    height: var(--llw-task-flash-light-diameter);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light::before {
    background: radial-gradient(circle, rgba(218, 253, 255, .42) 0 3%, rgba(78, 226, 248, .22) 18%, rgba(52, 171, 216, .1) 39%, transparent 70%);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) scale(var(--llw-task-flash-light-scale));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light::after {
    background: radial-gradient(circle, rgba(0, 3, 8, .2) 0 8%, rgba(0, 4, 10, .11) 31%, transparent 69%);
    mix-blend-mode: multiply;
    transform: translate(calc(-50% + var(--llw-task-flash-shadow-x, 0px)), calc(-50% + var(--llw-task-flash-shadow-y, 0px))) scale(var(--llw-task-flash-light-scale));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light--travel {
    --llw-task-flash-light-diameter: 128px;
    --llw-task-flash-light-scale: var(--llw-task-flash-travel-light-scale);
    opacity: var(--llw-task-flash-travel-light-opacity);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light--merge {
    --llw-task-flash-light-diameter: 200px;
    --llw-task-flash-light-scale: var(--llw-task-flash-merge-light-scale);
    opacity: var(--llw-task-flash-merge-light-opacity);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__light--task {
    --llw-task-flash-light-diameter: 280px;
    --llw-task-flash-light-scale: var(--llw-task-flash-task-light-scale);
    opacity: var(--llw-task-flash-task-light-opacity);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__impulse {
    position: absolute;
    z-index: 3;
    display: block;
    width: calc(4px + var(--llw-task-flash-travel-core-growth));
    height: var(--llw-task-flash-travel-body);
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(141, 105, 255, .2) 24%, #63edff 45%, #f4ffff 50%, #63edff 55%, rgba(235, 78, 224, .2) 76%, transparent);
    background-repeat: no-repeat;
    opacity: var(--llw-task-flash-travel-opacity);
    filter:
        brightness(var(--llw-task-flash-travel-brightness))
        drop-shadow(0 0 var(--llw-task-flash-travel-glow) rgba(77, 223, 247, .86))
        drop-shadow(0 0 2px rgba(235, 78, 224, .32));
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-task-selection-flash__impulse--left,
    .llw-task-selection-flash__impulse--right
) {
    top: var(--llw-task-flash-position);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__impulse--left {
    left: var(--llw-task-flash-edge-inset);
    transform: translateY(-50%) scale(var(--llw-task-flash-travel-scale));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__impulse--right {
    right: var(--llw-task-flash-edge-inset);
    transform: translateY(-50%) scale(var(--llw-task-flash-travel-scale));
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-task-selection-flash__impulse--top,
    .llw-task-selection-flash__impulse--bottom
) {
    left: var(--llw-task-flash-position);
    width: var(--llw-task-flash-travel-body);
    height: calc(4px + var(--llw-task-flash-travel-core-growth));
    background: linear-gradient(90deg, transparent, rgba(141, 105, 255, .2) 24%, #63edff 45%, #f4ffff 50%, #63edff 55%, rgba(235, 78, 224, .2) 76%, transparent);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__impulse--top {
    top: var(--llw-task-flash-edge-inset);
    transform: translateX(-50%) scale(var(--llw-task-flash-travel-scale));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__impulse--bottom {
    bottom: var(--llw-task-flash-edge-inset);
    transform: translateX(-50%) scale(var(--llw-task-flash-travel-scale));
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-task-selection-flash__merge,
    .llw-task-selection-flash__bridge
) {
    position: absolute;
    display: block;
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge[data-role="equal"],
.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__bridge[data-role="equal"] {
    --llw-task-flash-node-long: 15px;
    --llw-task-flash-node-short: 5px;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge {
    z-index: 2;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(141, 105, 255, .34), #61eaff 24%, #f3ffff 50%, #61eaff 76%, rgba(235, 78, 224, .3));
    box-shadow: 0 0 2px rgba(238, 255, 255, .96), 0 0 var(--llw-task-flash-node-bloom) rgba(77, 223, 247, .92);
    opacity: var(--llw-task-flash-node-energy);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge::before {
    position: absolute;
    inset: 25% 13%;
    border-radius: inherit;
    background: #f7ffff;
    box-shadow: 0 0 3px #efffff;
    content: "";
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge::after {
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(211, 80, 239, .3);
    border-radius: inherit;
    content: "";
    opacity: var(--llw-task-flash-node-energy);
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-task-selection-flash__merge--left,
    .llw-task-selection-flash__merge--right
) {
    top: var(--llw-task-flash-target-y);
    width: var(--llw-task-flash-node-short);
    height: var(--llw-task-flash-node-long);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge--left {
    left: 0;
    transform: translate(0, -50%) scale(var(--llw-task-flash-node-scale));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge--right {
    right: 0;
    transform: translate(0, -50%) scale(var(--llw-task-flash-node-scale));
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-task-selection-flash__merge--top,
    .llw-task-selection-flash__merge--bottom
) {
    left: var(--llw-task-flash-target-x);
    width: var(--llw-task-flash-node-long);
    height: var(--llw-task-flash-node-short);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge--top {
    top: 0;
    transform: translate(-50%, 0) scale(var(--llw-task-flash-node-scale));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__merge--bottom {
    bottom: 0;
    transform: translate(-50%, 0) scale(var(--llw-task-flash-node-scale));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__bridge {
    z-index: 1;
    background: linear-gradient(90deg, #edffff, #67eaff 38%, rgba(133, 97, 255, .24) 78%, transparent);
    box-shadow: 0 0 var(--llw-task-flash-node-bloom) rgba(91, 230, 250, .68);
    opacity: var(--llw-task-flash-node-energy);
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-task-selection-flash__bridge--left,
    .llw-task-selection-flash__bridge--right
) {
    top: var(--llw-task-flash-target-y);
    width: var(--llw-task-flash-bridge-length, 18px);
    height: 1px;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__bridge--left {
    left: 0;
    transform: translateY(-50%) scaleX(var(--llw-task-flash-energy));
    transform-origin: 0 50%;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__bridge--right {
    right: 0;
    transform: translateY(-50%) rotate(180deg) scaleX(var(--llw-task-flash-energy));
    transform-origin: 100% 50%;
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-task-selection-flash__bridge--top,
    .llw-task-selection-flash__bridge--bottom
) {
    left: var(--llw-task-flash-target-x);
    width: 1px;
    height: var(--llw-task-flash-bridge-length, 18px);
    background: linear-gradient(180deg, #edffff, #67eaff 38%, rgba(133, 97, 255, .24) 78%, transparent);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__bridge--top {
    top: 0;
    transform: translateX(-50%) scaleY(var(--llw-task-flash-energy));
    transform-origin: 50% 0;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-selection-flash__bridge--bottom {
    bottom: 0;
    transform: translateX(-50%) rotate(180deg) scaleY(var(--llw-task-flash-energy));
    transform-origin: 50% 100%;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-button.is-task-selection-flashing {
    border-color: rgb(225 253 255 / calc(.46 + var(--llw-task-flash-energy) * .54));
    color: #f3ffff;
    text-shadow: 0 0 2px #fff, 0 0 7px rgba(15, 89, 106, .88);
    box-shadow:
        inset 0 0 0 100px rgb(43 216 242 / calc(var(--llw-task-flash-energy) * .86)),
        inset 0 0 18px rgb(229 254 255 / calc(var(--llw-task-flash-energy) * .94)),
        0 0 var(--llw-task-flash-bloom, 0px) rgba(77, 223, 247, .82),
        var(--llw-task-flash-shadow-x, 0px) var(--llw-task-flash-shadow-y, 0px) 14px rgb(0 3 8 / calc(var(--llw-task-flash-energy) * .48)),
        0 6px 0 #020406;
    filter:
        brightness(var(--llw-task-flash-brightness, 1))
        drop-shadow(0 0 var(--llw-task-flash-bloom, 0px) rgba(77, 223, 247, .74))
        drop-shadow(0 0 var(--llw-task-flash-fringe, 0px) rgba(218, 69, 229, .24));
}

.llw-workspace[data-visual-skin="tron"] .llw-task-button.is-task-selection-powering::before {
    opacity: var(--llw-task-flash-led-power, 0);
    filter: brightness(var(--llw-task-flash-led-brightness, 0));
    box-shadow:
        0 0 calc(var(--llw-task-flash-led-bloom, 0px) * .38) rgba(223, 252, 255, .78),
        0 0 var(--llw-task-flash-led-bloom, 0px) rgba(54, 208, 233, .68);
    transition: none;
    animation: none !important;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-button.is-task-selection-flashing::before {
    background: linear-gradient(90deg, #51dff4, #fbffff 48%, #70efff 72%, rgba(221, 78, 229, .62));
    box-shadow:
        0 0 3px #fff,
        0 0 var(--llw-task-flash-bloom) rgba(77, 223, 247, .96),
        0 0 var(--llw-task-flash-fringe) rgba(221, 78, 229, .38);
    opacity: var(--llw-task-flash-energy);
}

.llw-workspace[data-learning-motion="reduced"] :is(
    .llw-task-selection-flash,
    .llw-task-selection-flash__lighting,
    .llw-task-button.is-task-selection-flashing,
    .llw-task-button.is-task-selection-incoming,
    .llw-task-button.is-task-selection-powering,
    .llw-task-thinking-emitter,
    .llw-tool-energy i
) {
    display: none !important;
    animation: none !important;
    filter: none !important;
}

.llw-workspace[data-learning-motion="low"] .llw-task-thinking-emitter {
    display: none !important;
}

.llw-workspace[data-visual-skin="tron"] .llw-workspace-stage {
    border: 1px solid rgba(119, 151, 176, .14);
    border-radius: 10px;
    background:
        linear-gradient(rgba(97, 158, 184, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 158, 184, .025) 1px, transparent 1px),
        radial-gradient(circle at 50% 18%, rgba(73, 166, 198, .07), transparent 45%),
        linear-gradient(145deg, rgba(15, 23, 32, .96), rgba(3, 7, 12, .98));
    background-size: 38px 38px, 38px 38px, auto, auto;
    box-shadow: 0 24px 44px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .04), inset 0 0 55px rgba(0, 0, 0, .5);
}

.llw-workspace[data-visual-skin="tron"] .llw-workspace-stage::before {
    position: absolute;
    z-index: 0;
    inset: 10px;
    border: 1px solid rgba(104, 166, 189, .05);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    pointer-events: none;
    content: "";
}

.llw-workspace[data-visual-skin="tron"] .llw-workspace-empty {
    color: var(--llw-muted);
    background: linear-gradient(135deg, rgb(85 239 255 / 3%), transparent 48%);
}

.llw-workspace[data-visual-skin="tron"] .llw-empty-mark {
    color: var(--llw-tron-energy);
    text-shadow: 0 0 14px rgb(85 239 255 / 40%);
}

.llw-workspace[data-visual-skin="tron"] .llw-learning-context {
    border-left-color: rgba(85, 239, 255, .36);
    background:
        linear-gradient(117deg, rgba(255, 255, 255, .055), transparent 18%, transparent 79%, rgba(126, 170, 198, .035)),
        #0e131b;
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-context-progress-track,
    .llw-time-progress-track) {
    border-color: #364757;
    background: #050a0f;
    box-shadow: inset 0 2px 4px rgb(0 0 0 / 78%);
}

.llw-workspace[data-visual-skin="tron"] .llw-metrics {
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    padding: 6px 8px;
    border-color: rgba(125, 153, 178, .24);
    border-radius: 10px;
    background: var(--llw-tron-grain);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .07), inset 0 -7px 18px rgba(0, 0, 0, .42);
}

.llw-workspace[data-visual-skin="tron"] .llw-command-panel .llw-metric {
    border-right-color: var(--llw-tron-line);
    background: transparent;
    box-shadow: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-command-panel .llw-tool-picker {
    height: 100%;
    gap: 7px;
    padding: 0 8px;
}

.llw-workspace[data-visual-skin="tron"] .llw-command-panel .llw-tool-tabs {
    gap: 5px;
}

.llw-workspace[data-visual-skin="tron"] .llw-chronometer-readout {
    height: 46px;
    padding: 0 8px;
    border: 1px solid rgba(125, 156, 180, .21);
    border-radius: 7px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .055), transparent 28%),
        linear-gradient(180deg, #151d27, #080c12);
    box-shadow: 0 4px 0 #030508, inset 0 4px 9px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .05);
}

.llw-workspace[data-visual-skin="tron"] .llw-chronometer-readout .llw-metric-value {
    color: #f1fbff;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    text-shadow: 0 0 9px rgba(105, 236, 255, .2);
}

.llw-workspace[data-visual-skin="tron"] .llw-time-progress-track {
    height: 10px;
    border: 1px solid rgba(112, 145, 168, .18);
    border-radius: 99px;
    background: #030508;
    box-shadow: inset 0 3px 5px #000;
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab {
    position: relative;
    isolation: isolate;
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding-bottom: 10px;
    border-color: rgba(125, 156, 181, .22);
    border-radius: 7px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .06), transparent 25%),
        linear-gradient(180deg, #171f29, #090d13);
    color: #8494a3;
    box-shadow: 0 4px 0 #030508, 0 7px 12px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .065);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab-icon svg {
    display: none;
    width: 21px;
    height: 21px;
    stroke-width: 1.55;
}

/* Fusion selected-tool droplets: deterministic CSS motion inside one active host. */
.llw-workspace[data-visual-skin="tron"] .llw-tool-energy {
    position: absolute;
    z-index: 0;
    inset: 5px;
    overflow: hidden;
    border-radius: 5px;
    pointer-events: none;
}

.llw-workspace[data-visual-skin="tron"] :is(
    .llw-tool-icon,
    .llw-tool-copy
) {
    position: relative;
    z-index: 2;
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-active-mark {
    z-index: 5;
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-energy i {
    position: absolute;
    bottom: -12px;
    left: var(--llw-tool-droplet-x);
    width: 1px;
    height: var(--llw-tool-droplet-length, 8px);
    border-radius: 99px;
    background: linear-gradient(
        to top,
        transparent,
        rgb(var(--llw-tool-energy, 91 226 246) / 82%),
        #efffff
    );
    box-shadow: 0 0 4px rgb(var(--llw-tool-energy, 91 226 246) / 52%);
    opacity: 0;
    animation: llwActiveToolDroplet
        var(--llw-tool-droplet-duration)
        linear
        var(--llw-tool-droplet-delay)
        infinite;
}

@keyframes llwActiveToolDroplet {
    0%, 18% {
        opacity: 0;
        transform: translateY(12px) scaleY(.55);
    }
    30% { opacity: var(--llw-tool-droplet-alpha, .36); }
    58% { opacity: calc(var(--llw-tool-droplet-alpha, .36) * .9); }
    76%, 100% {
        opacity: 0;
        transform: translateY(-46px) scaleY(1.08);
    }
}

/* Frozen Fusion monochrome tool glyphs: presentation only. */
.llw-workspace[data-visual-skin="tron"] .llw-tool-tab-icon .llw-tool-icon {
    display: inline-grid;
    width: 21px;
    height: 21px;
    place-items: center;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: var(--llw-tron-tool-glyph) center / 19px 19px no-repeat;
    mask: var(--llw-tron-tool-glyph) center / 19px 19px no-repeat;
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab-icon[data-tool="none"] {
    --llw-tron-tool-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='m6.4 6.4 11.2 11.2'/%3E%3C/svg%3E");
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab-icon[data-tool="code"] {
    --llw-tron-tool-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-4 5 4 5M16 7l4 5-4 5M14 4l-4 16'/%3E%3C/svg%3E");
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab-icon[data-tool="text"] {
    --llw-tron-tool-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='16' rx='1'/%3E%3Cpath d='m8 8 2 8 2-5 2 5 2-8'/%3E%3C/svg%3E");
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab-icon[data-tool="table"] {
    --llw-tron-tool-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='16' rx='1'/%3E%3Cpath d='m8 8 4 8M12 8l-4 8M14 8h3M14 12h3M14 16h3'/%3E%3C/svg%3E");
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab-icon[data-tool="drawing"] {
    --llw-tron-tool-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19 9 8l4 6 3-4 4 9H4Z'/%3E%3Ccircle cx='17' cy='6' r='2'/%3E%3C/svg%3E");
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab::before,
.llw-workspace[data-visual-skin="tron"] .llw-tool-tab::after {
    position: absolute;
    inset: auto;
    left: 50%;
    border-radius: 4px;
    content: "";
    transform: translateX(-50%);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab::before {
    z-index: 3;
    bottom: 3px;
    width: 24px;
    height: 8px;
    border: 1px solid var(--llw-tron-led-socket-border);
    background: var(--llw-tron-led-socket);
    box-shadow: var(--llw-tron-led-socket-shadow);
    pointer-events: none;
    transition: border-color var(--llw-tron-led-transition), box-shadow var(--llw-tron-led-transition);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab::after {
    z-index: 4;
    bottom: 6px;
    width: 18px;
    height: 3px;
    background: var(--llw-tron-led-idle);
    pointer-events: none;
    transition: background var(--llw-tron-led-transition), box-shadow var(--llw-tron-led-transition);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab:not([aria-pressed="true"]):not([aria-disabled="true"]):hover::after,
.llw-workspace[data-visual-skin="tron"] .llw-tool-tab:not([aria-pressed="true"]):not([aria-disabled="true"]):focus-visible::after {
    background: var(--llw-tron-led-pre);
    box-shadow: var(--llw-tron-led-pre-bloom);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab:not([aria-pressed="true"]):not([aria-disabled="true"]):hover,
.llw-workspace[data-visual-skin="tron"] .llw-tool-tab:not([aria-pressed="true"]):not([aria-disabled="true"]):focus-visible {
    color: #effcff;
    border-color: rgba(104, 224, 244, .45);
    box-shadow: 0 7px 0 #030508, 0 12px 17px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .09);
    transform: translateY(-3px);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab[aria-pressed="true"] {
    border-width: 1px 2px 3px 1px;
    border-color: rgba(210, 239, 248, .52) rgba(73, 91, 105, .55) rgba(31, 40, 50, .95) rgba(137, 187, 207, .38);
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .1), transparent 32%),
        linear-gradient(180deg, #222d3a, #0e151e);
    box-shadow: 0 9px 0 #030508, 0 17px 23px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .12);
    transform: translateY(-5px) translateZ(24px);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab[aria-pressed="true"]::after {
    background: var(--llw-tron-led-active);
    box-shadow: var(--llw-tron-led-active-bloom);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-tab[aria-disabled="true"] {
    border-color: #28323e;
    color: #718191;
    background: #090e14;
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 50%);
    opacity: .72;
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-tools, .llw-answer-panel) {
    border-color: rgba(125, 153, 178, .24);
    border-radius: 10px;
    background: var(--llw-tron-grain);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .07), inset 0 -7px 18px rgba(0, 0, 0, .42);
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-tool-panel, .llw-text-editor,
    .llw-canvas-placeholder) {
    border-color: rgba(127, 158, 181, .18);
    color: var(--llw-ink);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 24%),
        rgba(7, 11, 17, .92);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, .52), 0 13px 25px rgba(0, 0, 0, .32);
}

.llw-workspace[data-visual-skin="tron"] .llw-tool-panel > .llw-tool-heading {
    border-bottom-color: rgb(121 156 180 / 12%);
    background: rgb(13 19 27 / 82%);
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-condition-embedded,
    .llw-condition-window:not(.is-minimized)) {
    border-width: 1px 3px 4px 1px;
    border-color: rgba(214, 249, 255, .42) rgba(63, 113, 143, .34) rgba(27, 61, 83, .72) rgba(126, 224, 248, .27);
    border-radius: 0;
    clip-path: polygon(14px 0, calc(100% - 24px) 0, 100% 25px, 100% calc(100% - 13px), calc(100% - 15px) 100%, 25px 100%, 0 calc(100% - 25px), 0 13px);
    color: var(--llw-ink);
    background:
        linear-gradient(112deg, rgba(223, 250, 255, .13), transparent 17%, transparent 70%, rgba(83, 167, 211, .065)),
        linear-gradient(180deg, rgba(15, 66, 98, .34), rgba(3, 20, 34, .46));
    box-shadow:
        0 15px 24px rgba(0, 0, 0, .48),
        6px 9px 0 rgba(1, 4, 8, .58),
        inset 0 1px rgba(230, 252, 255, .45),
        inset -8px 0 17px rgba(31, 92, 128, .13),
        inset 0 -7px 16px rgba(3, 20, 32, .38),
        inset 0 0 38px rgba(43, 152, 204, .08);
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-condition-embedded-header,
    .llw-condition-header) {
    min-height: 44px;
    padding: 5px 7px 4px 14px;
    border-bottom-color: rgba(119, 211, 240, .15);
    color: var(--llw-ink);
    background: linear-gradient(90deg, rgba(4, 12, 20, .76), rgba(9, 24, 36, .47), rgba(4, 12, 20, .72));
}

/* Existing task navigation, visually integrated with the Tron condition frame. */
.llw-workspace[data-visual-skin="tron"] .llw-condition-nav,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-nav {
    border: 1px solid rgba(122, 168, 191, .32);
    border-radius: 6px;
    color: #9cabb7;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 32%),
        linear-gradient(180deg, rgba(18, 28, 38, .94), rgba(4, 9, 14, .96));
    box-shadow:
        0 3px 0 rgba(1, 4, 7, .88),
        0 7px 14px rgba(0, 0, 0, .28),
        inset 0 1px rgba(224, 249, 255, .08),
        inset 0 -3px 6px rgba(0, 0, 0, .4);
    font-size: 0;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-nav::before,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-nav::before {
    width: 18px;
    height: 18px;
    background-color: currentColor;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-nav-previous::before,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-nav-previous::before {
    transform: scaleX(-1);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-nav:hover:not(:disabled),
.llw-workspace[data-visual-skin="tron"] .llw-condition-nav:focus-visible,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-nav:hover:not(:disabled),
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-nav:focus-visible {
    border-color: rgba(104, 224, 244, .48);
    color: #e9fcff;
    background:
        linear-gradient(145deg, rgba(119, 225, 244, .09), transparent 34%),
        linear-gradient(180deg, rgba(22, 39, 51, .96), rgba(5, 13, 19, .98));
    box-shadow:
        0 4px 0 rgba(1, 4, 7, .9),
        0 8px 16px rgba(0, 0, 0, .32),
        inset 0 1px rgba(224, 249, 255, .12),
        inset 0 -3px 6px rgba(0, 0, 0, .42);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-nav:active:not(:disabled),
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-nav:active:not(:disabled) {
    transform: translateY(calc(-50% + 1px));
    box-shadow: 0 1px 0 #010305, inset 0 4px 8px rgba(0, 0, 0, .52);
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-condition-embedded-body,
    .llw-condition-body) {
    color: var(--llw-ink);
    background:
        radial-gradient(circle at 50% 45%, rgba(66, 161, 201, .07), transparent 48%),
        rgba(2, 12, 20, .08);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-media,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-media {
    position: relative;
    isolation: isolate;
    padding: 0;
    background:
        linear-gradient(112deg, rgba(213, 249, 255, .11), transparent 18% 73%, rgba(87, 190, 255, .07)),
        radial-gradient(ellipse at 50% 44%, rgba(76, 188, 255, .09), transparent 66%),
        rgba(10, 65, 103, .14);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-media::after {
    content: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-task-image,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-task-image {
    position: relative;
    z-index: 2;
    background: #fff;
    filter: none;
    mix-blend-mode: normal;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-media[data-tron-condition-ready="true"] .llw-condition-task-image,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-media[data-tron-condition-ready="true"] .llw-condition-task-image,
.llw-workspace[data-visual-skin="tron"] .llw-condition-media[data-tron-condition-source-hidden="true"] .llw-condition-task-image,
.llw-fullscreen-overlay[data-visual-skin="tron"] .llw-condition-media[data-tron-condition-source-hidden="true"] .llw-condition-task-image {
    visibility: hidden;
}

.llw-condition-glass-canvas,
.llw-condition-emission-canvas {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.llw-condition-transition-compositor {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.llw-condition-glass-canvas[hidden],
.llw-condition-emission-canvas[hidden] {
    display: none;
}

.llw-condition-glass-canvas {
    position: relative;
    z-index: 4;
    display: block;
}

.llw-condition-emission-canvas {
    position: relative;
    z-index: 5;
    display: block;
    opacity: .12;
    mix-blend-mode: screen;
}

.llw-condition-transition-compositor {
    position: absolute;
    z-index: 18;
    inset: 0;
    display: block;
    border: 0;
    background: transparent;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter {
    position: relative;
    z-index: 60;
    min-width: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter::before,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter::before {
    position: absolute;
    inset: auto;
    right: 7%;
    left: 7%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(111, 175, 197, .2), rgba(163, 80, 255, .18), transparent);
    content: "";
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter::after,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter::after {
    content: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter > span,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter > span {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(122, 168, 190, .22);
    border-radius: 99px;
    background: #090e14;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45), inset 0 2px 4px #000;
    transition: width 150ms, border-color 150ms, box-shadow 150ms, transform 150ms;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter > span > i,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter > span > i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(120, 201, 223, .45);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter:hover,
.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter:focus-visible,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter:hover,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter:focus-visible {
    background: transparent;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter:is(:hover, :focus-visible, .is-dragging) > span,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter:is(:hover, :focus-visible, .is-dragging) > span {
    width: 96px;
    border-color: color-mix(in srgb, #55efff 58%, rgba(150, 180, 195, .3));
    box-shadow: 0 4px 8px rgba(0, 0, 0, .5), 0 0 10px rgba(85, 239, 255, .42), inset 0 2px 4px #000;
    transform: translateY(-1px);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter:is(:hover, :focus-visible, .is-dragging) > span > i,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-condition-splitter:is(:hover, :focus-visible, .is-dragging) > span > i {
    background: #55efff;
    box-shadow: 0 0 6px rgba(85, 239, 255, .42);
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-panel,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel {
    position: relative;
    z-index: 52;
    box-sizing: border-box;
    height: var(--llw-answer-height, 112px);
    min-height: var(--llw-answer-height, 112px);
    grid-template-rows: 0 54px minmax(18px, 1fr);
    gap: 4px;
    padding: 11px 15px;
    overflow: visible;
    transform: translateY(0);
    transition: transform 220ms cubic-bezier(.2, 0, 0, 1), filter 220ms;
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-heading,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel .llw-answer-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-row,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel .llw-answer-row {
    grid-row: 2;
    width: 100%;
    align-self: center;
    padding: 3px;
    border-radius: 8px;
    background: #05080c;
    box-shadow: inset 0 4px 8px #000;
    transition: transform 220ms cubic-bezier(.2, 0, 0, 1), box-shadow 220ms, background 220ms;
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-status,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel .llw-answer-status {
    grid-row: 3;
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-panel:focus-within,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel:focus-within {
    z-index: 65;
    filter: brightness(.98);
    transform: translateY(2px);
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-row:focus-within,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel .llw-answer-row:focus-within {
    background: #05090f;
    box-shadow:
        inset 0 0 0 1px rgba(104, 223, 243, .24),
        inset 0 5px 10px #000,
        0 8px 15px rgba(0, 0, 0, .4);
    transform: translateY(-4px);
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-row :is(input, textarea),
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel .llw-answer-row :is(input, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 15px;
    border: 1px solid rgba(122, 160, 184, .2);
    border-radius: 6px;
    color: var(--llw-ink);
    background: #060a10;
    box-shadow: inset 0 6px 13px rgba(0, 0, 0, .65), inset 0 1px rgba(255, 255, 255, .03);
    resize: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-row :is(input, textarea):focus-visible,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel .llw-answer-row :is(input, textarea):focus-visible {
    border-color: rgba(128, 211, 232, .32);
    box-shadow: inset 0 5px 11px rgba(0, 0, 0, .72), inset 0 -2px 8px rgba(67, 188, 218, .05);
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-row :is(input, textarea)::placeholder,
.llw-fullscreen-overlay[data-visual-skin="tron"] > .llw-answer-panel .llw-answer-row :is(input, textarea)::placeholder {
    color: #718191;
}

.llw-workspace[data-visual-skin="tron"] .llw-primary-button {
    border-color: rgb(104 224 244 / 45%);
    color: #effcff;
    background:
        linear-gradient(150deg, rgb(255 255 255 / 8%), transparent 25%),
        linear-gradient(180deg, #1c2b36, #0a141b);
    box-shadow: 0 4px 0 #030508, inset 0 -2px 0 rgb(85 239 255 / 58%), inset 0 1px rgb(255 255 255 / 8%);
}

.llw-workspace[data-visual-skin="tron"] .llw-primary-button:hover:not(:disabled) {
    color: #fff;
    background:
        linear-gradient(150deg, rgb(255 255 255 / 10%), transparent 25%),
        linear-gradient(180deg, #243743, #0d1b24);
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-empty.is-error,
    .llw-condition-prompt.is-error) {
    color: #ff7787;
}

.llw-workspace[data-visual-skin="tron"] :is(.llw-list[aria-busy="true"],
    .llw-task-button.is-loading) {
    color: #cbeef3;
}

.llw-workspace[data-visual-skin="tron"] .llw-task-button.is-loading::after {
    border-color: var(--llw-tron-led-socket-border);
    background: var(--llw-tron-led-socket);
    color: transparent;
    text-shadow: none;
}

.llw-workspace[data-visual-skin="tron"] :is(button, input, select, textarea):focus-visible,
.llw-fullscreen-overlay[data-visual-skin="tron"] :is(button, input, select, textarea):focus-visible {
    outline: 2px solid var(--llw-tron-focus);
    outline-offset: 2px;
}

.llw-fullscreen-overlay[data-visual-skin="tron"] {
    background:
        linear-gradient(rgb(85 239 255 / 2%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(85 239 255 / 2%) 1px, transparent 1px),
        #050910;
    background-size: 48px 48px, 48px 48px, auto;
}

.llw-fullscreen-overlay[data-visual-skin="tron"] > :is(.llw-condition-embedded,
    .llw-answer-panel) {
    border-color: var(--llw-tron-line);
    color: var(--llw-ink);
    background: var(--llw-tron-surface-2);
}

@media (max-width: 1120px) {
    .llw-workspace[data-visual-skin="tron"] {
        padding: 10px;
    }
}

@media (max-width: 900px) {
    .llw-workspace[data-visual-skin="tron"] :is(.llw-learning-layout,
        .llw-workspace-stage, .llw-workspace-content, .llw-tools) {
        min-width: 0;
        max-width: 100%;
    }
}

/* Frozen Fusion handoff: fullscreen keeps the same splitter/answer rows and hides only the technical preview helper visually. */
.llw-fullscreen-overlay.is-embedded-condition[data-visual-skin="tron"] {
    grid-template-rows:
        minmax(180px, 1fr)
        14px
        var(--llw-answer-height, 112px);
    gap: 0;
}

.llw-fullscreen-overlay.is-embedded-condition[data-visual-skin="tron"] > .llw-condition-splitter {
    height: 14px;
    min-height: 14px;
}

@media (max-width: 820px) {
    .llw-workspace[data-visual-skin="tron"] {
        padding: 8px;
    }
}

@media (max-width: 620px) {
    .llw-workspace[data-visual-skin="tron"] .llw-navigation {
        padding: 6px;
    }

    .llw-workspace[data-visual-skin="tron"] .llw-task-grid {
        grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .llw-workspace[data-visual-skin="tron"] :is(
        .llw-task-selection-flash,
        .llw-task-selection-flash__lighting,
        .llw-task-button.is-task-selection-flashing,
        .llw-task-button.is-task-selection-incoming,
        .llw-task-button.is-task-selection-powering,
        .llw-task-thinking-emitter,
        .llw-tool-energy i
    ) {
        display: none !important;
        animation: none !important;
        filter: none !important;
    }

    .llw-workspace[data-visual-skin="tron"] *,
    .llw-workspace[data-visual-skin="tron"] *::before,
    .llw-workspace[data-visual-skin="tron"] *::after,
    .llw-fullscreen-overlay[data-visual-skin="tron"] *,
    .llw-fullscreen-overlay[data-visual-skin="tron"] *::before,
    .llw-fullscreen-overlay[data-visual-skin="tron"] *::after {
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    .llw-workspace[data-visual-skin="tron"] :is(
        .llw-task-selection-flash,
        .llw-task-thinking-emitter,
        .llw-tool-energy i
    ) {
        display: none !important;
    }

    .llw-workspace[data-visual-skin="tron"] :is(
        .llw-navigation,
        .llw-navigation-section,
        .llw-list-button,
        .llw-workspace-stage,
        .llw-learning-context,
        .llw-metrics,
        .llw-tools,
        .llw-condition-embedded,
        .llw-condition-window,
        .llw-answer-panel,
        .llw-condition-splitter
    ) {
        border: 1px solid CanvasText;
        forced-color-adjust: auto;
    }

    .llw-workspace[data-visual-skin="tron"] :is(
        .llw-theme-button[aria-pressed="true"],
        .llw-task-button[aria-pressed="true"],
        .llw-tool-tab[aria-pressed="true"]
    ) {
        border-color: Highlight;
        color: HighlightText;
        background: Highlight;
    }
}

/* Final convergence cascade: keep shared core geometry after legacy visual passes. */
.llw-workspace .llw-metrics {
    grid-template-columns: 218px minmax(0, 1fr) auto;
}

.llw-workspace .llw-timer-instrument {
    position: relative;
    box-sizing: border-box;
    width: 218px;
    min-width: 218px;
    height: 52px;
    min-height: 52px;
    display: block;
    overflow: hidden;
    padding: 3px 7px;
    border: 1px solid rgba(125, 156, 180, .21);
    border-radius: 7px;
    color: #edf8fc;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .055), transparent 28%),
        linear-gradient(180deg, #151d27, #080c12);
    box-shadow: 0 4px 0 #030508, inset 0 4px 9px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .05);
}

.llw-workspace .llw-timer-instrument .llw-time-progress-track {
    position: absolute;
    right: 7px;
    bottom: 1px;
    left: 7px;
    width: auto;
    height: 10px;
    overflow: visible;
    border: 1px solid rgba(112, 145, 168, .18);
    border-radius: 99px;
    background: #030508;
    box-shadow: inset 0 3px 5px #000;
}

.llw-workspace .llw-timer-instrument .llw-time-progress-track::before {
    position: absolute;
    inset: 2px;
    width: auto;
    border-radius: inherit;
    background: linear-gradient(90deg, #50e997 0%, #d9dc55 45%, #ffae42 74%, #ff5a5f 100%);
    box-shadow: none;
    opacity: .15;
}

.llw-workspace .llw-timer-instrument .llw-time-progress-track::after {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: auto;
    bottom: 2px;
    left: 2px;
    width: calc(var(--llw-time-progress) - 4px);
    min-width: 3px;
    max-width: calc(100% - 4px);
    border-radius: inherit;
    background: linear-gradient(90deg, #50e997 0%, #d9dc55 48%, #ffae42 76%, #ff5a5f 100%);
    box-shadow: 0 0 7px rgba(90, 232, 166, .34);
}

.llw-workspace .llw-theme-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llw-workspace .llw-task-grid {
    min-width: 0;
    overflow-y: auto;
    padding-right: 0;
    scrollbar-gutter: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.llw-workspace .llw-task-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.llw-workspace .llw-answer-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.llw-workspace .llw-answer-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.llw-workspace .llw-answer-row :is(input, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    resize: none;
}

.llw-workspace:not([data-visual-skin="tron"]) .llw-answer-panel {
    box-sizing: border-box;
    min-height: 88px;
    padding: 8px 10px;
    overflow: hidden;
}

.llw-workspace[data-visual-skin="tron"] .llw-answer-panel {
    box-sizing: border-box;
    height: 112px;
    min-height: 112px;
    grid-template-rows: 0 54px 18px;
    gap: 4px;
    padding: 11px 15px;
    overflow: visible;
}

@media (max-width: 900px) {
    .llw-workspace .llw-metrics {
        grid-template-columns: 218px minmax(0, 1fr) auto;
    }

    .llw-workspace .llw-tool-picker {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
}

/* Tron timer polish: keep artwork and the elapsed HUD on one continuous surface. */
.llw-workspace[data-visual-skin="tron"] .llw-timer-concepts .timer-concept--eggs {
    background: linear-gradient(145deg, #111926, #03070c 72%);
    box-shadow: inset 0 5px 9px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(167, 211, 226, .04);
}

.llw-workspace[data-visual-skin="tron"] .llw-timer-concepts .timer-concept--bubble {
    background: radial-gradient(circle at 46% 42%, rgba(114, 179, 71, .09), transparent 38%), linear-gradient(145deg, #111a18, #03070c 72%);
    box-shadow: inset 0 5px 9px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(167, 211, 226, .04);
}

.llw-workspace[data-visual-skin="tron"] .llw-timer-concepts .timer-concept--bomb {
    background: radial-gradient(circle at 72% 58%, rgba(104, 158, 177, .08), transparent 36%), linear-gradient(145deg, #111923, #03070c 72%);
    box-shadow: inset 0 5px 9px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(167, 211, 226, .04);
}

.llw-workspace[data-visual-skin="tron"] .llw-timer-concepts :is(
    .timer-eggs__scene,
    .timer-bubble__scene,
    .timer-bomb__scene
) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.llw-workspace[data-visual-skin="tron"] .llw-timer-concepts .timer-concept--bar .timer-recommended-marker {
    display: none;
}

@media (max-width: 620px) {
    .llw-workspace .llw-metrics,
    .llw-workspace[data-visual-skin="tron"] .llw-metrics {
        height: auto;
        max-height: none;
        grid-template-columns: minmax(0, 1fr);
    }

    .llw-workspace .llw-timer-instrument {
        width: 100%;
        min-width: 0;
    }
}

/* Shared Fusion geometry cascade lock: keep structural rules after legacy skins. */

/* Keep both native input and glyph overlay on the same font metrics. */
.llw-workspace .llw-code-tool :is(.llw-editor, .llw-highlight) {
    font-family: Consolas, "Courier New", monospace;
}

/* Site skin input fills must not cover the glyph layer underneath the textarea. */
.llw-code-tool textarea.llw-editor {
    background: transparent;
    box-shadow: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Native textarea owns editing/selection; the inert overlay owns glyph colors. */
.llw-editor {
    z-index: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.llw-code-tool[data-ide-theme="light"] .llw-editor {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.llw-code-pane > .llw-code-search {
    grid-row: 1;
}

.llw-code-pane > .llw-editor-shell {
    grid-row: 2;
}

.llw-workspace[data-active-tool="code"] .llw-workspace-content,
.llw-workspace[data-active-tool="code"][data-visual-skin="tron"] .llw-workspace-content {
    grid-template-rows: 64px minmax(180px, 1fr) 14px 0;
}

.llw-ide-bottom-layout {
    grid-template-columns: minmax(0, 1fr) 8px minmax(220px, var(--llw-answer-width));
    min-height: 150px;
    padding: 0 0 8px;
    border: 1px solid #334155;
    border-radius: 0 0 10px 10px;
    background: #0b1220;
}

.llw-ide-bottom-layout > .llw-console-panel {
    grid-column: 1;
    border-bottom: 1px solid #334155;
    border-radius: 0 0 0 7px;
}

.llw-ide-bottom-layout > .llw-answer-console-splitter {
    grid-column: 2;
    border-bottom: 1px solid #334155;
}

.llw-code-tool.llw-tool-panel .llw-ide-bottom-layout > .llw-answer-panel {
    grid-column: 3;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(48px, auto) minmax(18px, 1fr);
    padding: 10px 12px;
    border-right: 0;
    border-left: 1px solid #334155;
    border-bottom: 1px solid #334155;
    border-radius: 0 0 7px 0;
    overflow: hidden;
}

.llw-code-tool .llw-ide-bottom-layout .llw-answer-heading {
    position: static;
    width: auto;
    height: auto;
    min-height: 30px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.llw-code-tool[data-ide-theme="light"] .llw-ide-bottom-layout {
    border-color: #c5cfdd;
    background: #e8edf5;
}

.llw-code-tool[data-ide-theme="light"] .llw-ide-bottom-layout > :is(
    .llw-console-panel,
    .llw-answer-console-splitter,
    .llw-answer-panel
) {
    border-bottom-color: #c5cfdd;
}

.llw-code-tool[data-ide-theme="light"] .llw-ide-bottom-layout > .llw-answer-panel {
    border-left-color: #c5cfdd;
}

.llw-ide-bottom-layout .llw-console-result-button {
    display: inline-flex;
    width: auto;
    min-width: 0;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
}

.llw-ide-bottom-layout .llw-console-result-button[hidden] {
    display: none;
}

.llw-ide-bottom-layout .llw-console-result-button.is-attention {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 1px rgb(167 139 250 / 34%), 0 0 15px rgb(124 58 237 / 62%);
    animation: llw-console-result-attention 720ms ease-in-out 3;
}

@keyframes llw-console-result-attention {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 1px rgb(167 139 250 / 28%), 0 0 10px rgb(124 58 237 / 42%);
    }

    50% {
        opacity: .92;
        transform: scale(1.055);
        box-shadow: 0 0 0 2px rgb(196 181 253 / 58%), 0 0 22px rgb(124 58 237 / 78%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .llw-ide-bottom-layout .llw-console-result-button.is-attention {
        animation: none;
        box-shadow: 0 0 0 2px rgb(196 181 253 / 56%), 0 0 12px rgb(124 58 237 / 46%);
    }
}

.llw-workspace .llw-task-grid {
    grid-template-columns: repeat(var(--llw-task-grid-columns, 3), minmax(40px, 1fr));
    column-gap: var(--llw-task-grid-column-gap, 16px);
}

.llw-workspace[data-visual-skin="tron"] .llw-task-grid {
    grid-template-columns: repeat(var(--llw-task-grid-columns, 3), 46px);
    column-gap: var(--llw-task-grid-column-gap, 16px);
    padding-right: var(--llw-task-grid-side-gutter, 18px);
    padding-left: var(--llw-task-grid-side-gutter, 18px);
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-task-grid {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1120px) {
    .llw-workspace[data-active-tool="code"] .llw-workspace-content,
    .llw-workspace[data-active-tool="code"][data-visual-skin="tron"] .llw-workspace-content {
        grid-template-rows: 60px minmax(190px, 1fr) 44px 0;
    }
}

@media (max-width: 900px) {
    .llw-ide-bottom-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(150px, 1fr) 0 auto;
        min-height: 290px;
        overflow: auto;
    }

    .llw-ide-bottom-layout > .llw-console-panel {
        grid-column: 1;
        grid-row: 1;
        min-height: 150px;
        max-height: none;
    }

    .llw-ide-bottom-layout > .llw-answer-console-splitter {
        grid-column: 1;
        grid-row: 2;
    }

    .llw-code-tool.llw-tool-panel .llw-ide-bottom-layout > .llw-answer-panel {
        grid-column: 1;
        grid-row: 3;
        min-height: 112px;
        border-top: 1px solid #334155;
        border-left: 0;
        border-radius: 0 0 7px 7px;
    }

    .llw-code-tool[data-ide-theme="light"] .llw-ide-bottom-layout > .llw-answer-panel {
        border-top-color: #c5cfdd;
    }
}
.llw-workspace .llw-learning-layout {
    grid-template-columns: var(--llw-themes-pane-width, 258px) 12px minmax(520px, 1fr);
    column-gap: 4px;
}

.llw-workspace .llw-navigation {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 8px;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-themes-pane-splitter {
    display: none;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-navigation-section {
    display: block;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed :is(.llw-panel-title, .llw-list-label-full) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-list-label-compact {
    display: inline;
}

.llw-workspace .llw-learning-layout.is-navigation-collapsed .llw-task-grid {
    grid-template-columns: minmax(0, 1fr);
}

.llw-workspace .llw-workspace-content,
.llw-workspace[data-visual-skin="tron"] .llw-workspace-content {
    --llw-answer-height: 112px;
    grid-template-rows: 64px minmax(180px, 1fr) 14px var(--llw-answer-height);
    gap: 0;
    padding: 8px;
    min-height: var(--llw-workspace-available-height, max(610px, calc(100dvh - 150px)));
    overflow: hidden;
}

.llw-workspace.has-embedded-condition .llw-workspace-stage {
    height: var(--llw-workspace-available-height, max(1px, calc(100dvh - 150px)));
    min-height: 1px;
    max-height: var(--llw-workspace-available-height, max(1px, calc(100dvh - 150px)));
}

.llw-workspace .llw-workspace-content.is-embedded-condition,
.llw-workspace[data-visual-skin="tron"] .llw-workspace-content.is-embedded-condition {
    grid-template-rows: 64px minmax(0, 1fr) 14px var(--llw-answer-height);
    height: 100%;
    min-height: 0;
    max-height: 100%;
}

.llw-workspace .llw-tools,
.llw-workspace .llw-tool-host,
.llw-workspace .llw-tool-host > :is(.llw-condition-embedded, .llw-ide, .llw-text-tool, .llw-table-tool, .llw-graphics-tool) {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.llw-workspace .llw-condition-media > :is(img, canvas) {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.llw-workspace .llw-condition-embedded .llw-condition-media > :is(img, canvas) {
    max-height: none;
}

.llw-workspace .llw-condition-splitter,
.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter {
    position: relative;
    z-index: 60;
    display: grid;
    height: 14px;
    min-height: 14px;
    place-items: center;
    cursor: ns-resize;
    touch-action: none;
    background: transparent;
}

.llw-workspace .llw-condition-splitter::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 7%;
    left: 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(100, 116, 139, .35), transparent);
}

.llw-workspace .llw-condition-splitter::after {
    content: "";
    position: relative;
    width: 68px;
    height: 10px;
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: 99px;
    background: repeating-linear-gradient(90deg, #f8fafc 0 18px, #64748b 18px 23px);
    box-shadow: 0 3px 8px rgba(15, 23, 42, .16);
    transition: width .16s ease, box-shadow .16s ease;
}

.llw-workspace .llw-condition-splitter:is(:hover, :focus-visible, .is-dragging)::after {
    width: 96px;
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter::before {
    background: linear-gradient(90deg, transparent, rgba(96, 183, 205, .42), transparent);
}

.llw-workspace[data-visual-skin="tron"] .llw-condition-splitter::after {
    border-color: rgba(122, 168, 190, .22);
    background: repeating-linear-gradient(90deg, #090e14 0 18px, rgba(117, 219, 239, .72) 18px 23px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .42), inset 0 1px rgba(180, 239, 249, .05);
}

.llw-workspace .llw-answer-panel,
.llw-workspace:not([data-visual-skin="tron"]) .llw-answer-panel,
.llw-workspace[data-visual-skin="tron"] .llw-answer-panel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: var(--llw-answer-height);
    min-height: var(--llw-answer-height);
    grid-template-rows: 0 54px minmax(18px, 1fr);
    gap: 4px;
    padding: 11px 15px;
    overflow: visible;
}

.llw-workspace .llw-answer-row,
.llw-workspace .llw-answer-row textarea {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
}

@media (max-width: 1120px) {
    .llw-workspace .llw-learning-layout,
    .llw-workspace[data-visual-skin="tron"] .llw-learning-layout {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .llw-workspace :is(.llw-navigation, .llw-themes-pane-splitter) {
        display: none;
    }

    .llw-workspace .llw-workspace-content,
    .llw-workspace[data-visual-skin="tron"] .llw-workspace-content {
        grid-template-rows: 60px minmax(190px, 1fr) 44px var(--llw-answer-height);
    }

    .llw-workspace .llw-workspace-content.is-embedded-condition,
    .llw-workspace[data-visual-skin="tron"] .llw-workspace-content.is-embedded-condition {
        grid-template-rows: 60px minmax(0, 1fr) 44px var(--llw-answer-height);
    }

    .llw-workspace .llw-condition-splitter,
    .llw-workspace[data-visual-skin="tron"] .llw-condition-splitter {
        height: 44px;
        min-height: 44px;
    }
}

@media (max-width: 900px) {
    .llw-workspace .llw-workspace-content,
    .llw-workspace[data-visual-skin="tron"] .llw-workspace-content {
        grid-template-rows: 60px minmax(170px, 1fr) 44px var(--llw-answer-height);
    }

    .llw-workspace .llw-workspace-content.is-embedded-condition,
    .llw-workspace[data-visual-skin="tron"] .llw-workspace-content.is-embedded-condition {
        grid-template-rows: 60px minmax(0, 1fr) 44px var(--llw-answer-height);
    }

    .llw-workspace .llw-answer-panel,
    .llw-workspace:not([data-visual-skin="tron"]) .llw-answer-panel,
    .llw-workspace[data-visual-skin="tron"] .llw-answer-panel {
        grid-template-rows: 0 50px minmax(18px, 1fr);
        padding: 9px 15px;
    }

    .llw-workspace .llw-answer-row :is(input, textarea) {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }
}

/* Task-local statistics live with condition actions, never in the lesson topbar. */
.llw-statistics-anchor {
    position: relative;
    display: inline-flex;
}

.llw-statistics-trigger {
    min-width: 30px;
    padding-inline: 6px;
    line-height: 1;
}

.llw-statistics-trigger:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.llw-statistics-popover {
    position: absolute;
    z-index: 140;
    top: calc(100% + 8px);
    right: 0;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 28px));
    max-height: min(430px, calc(100vh - 80px));
    padding: 12px;
    overflow: auto;
    border: 1px solid #9fb2ca;
    border-radius: 12px;
    color: #1e293b;
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 18px 44px rgb(15 23 42 / 24%);
    text-align: left;
}

.llw-statistics-content,
.llw-statistics-section {
    display: grid;
}

.llw-statistics-content {
    gap: 0;
}

.llw-statistics-section {
    gap: 5px;
}

.llw-statistics-section + .llw-statistics-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #d9e2ee;
}

.llw-statistics-heading {
    margin: 0 0 3px;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.llw-statistics-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.llw-statistics-label,
.llw-statistics-empty {
    color: #64748b;
    font-size: .76rem;
    font-weight: 400;
}

.llw-statistics-value {
    flex: 0 0 auto;
    color: #0f172a;
    font-size: .8rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.llw-statistics-empty {
    margin: 0;
}

.llw-statistics-empty.is-error {
    color: #b42318;
}

.llw-statistics-wrongs {
    display: grid;
    gap: 5px;
}

.llw-statistics-wrong-list {
    display: grid;
    gap: 4px;
    max-height: 112px;
    margin: 0;
    padding-left: 20px;
    overflow: auto;
}

.llw-statistics-wrong-answer {
    overflow-wrap: anywhere;
    color: #9f1239;
    font-size: .78rem;
}

.llw-workspace[data-workspace-theme="dark"] .llw-statistics-popover,
.llw-workspace[data-visual-skin="tron"] .llw-statistics-popover {
    border-color: #3c536d;
    color: #e5edf8;
    background: rgb(11 19 32 / 98%);
    box-shadow: 0 18px 48px rgb(0 0 0 / 54%);
}

.llw-workspace[data-workspace-theme="dark"] .llw-statistics-heading,
.llw-workspace[data-workspace-theme="dark"] .llw-statistics-value,
.llw-workspace[data-visual-skin="tron"] .llw-statistics-heading,
.llw-workspace[data-visual-skin="tron"] .llw-statistics-value {
    color: #f1f7ff;
}

.llw-workspace[data-workspace-theme="dark"] .llw-statistics-section + .llw-statistics-section,
.llw-workspace[data-visual-skin="tron"] .llw-statistics-section + .llw-statistics-section {
    border-color: #334155;
}

/* One body-level post-answer card survives ordinary correct-task removal. */
.llw-post-answer-host {
    position: fixed;
    z-index: 10020;
    right: 20px;
    bottom: 20px;
    width: min(440px, calc(100% - 40px));
}

.llw-post-answer-card {
    box-sizing: border-box;
    padding: 13px 14px 11px;
    border: 1px solid #475569;
    border-radius: 14px;
    color: #e5edf8;
    background: rgb(11 19 32 / 98%);
    box-shadow: 0 18px 44px rgb(15 23 42 / 34%);
    animation: llw-reaction-enter 180ms ease-out both;
}

.llw-post-answer-card.is-positive {
    border-color: #16a34a;
}

.llw-post-answer-card.is-wrong {
    border-color: #dc2626;
}

.llw-post-answer-result {
    display: flex;
    align-items: center;
    gap: 11px;
}

.llw-post-answer-result-icon {
    display: grid;
    flex: 0 0 auto;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1;
}

.llw-post-answer-card.is-positive .llw-post-answer-result-icon {
    color: #4ade80;
}

.llw-post-answer-card.is-wrong .llw-post-answer-result-icon {
    color: #f87171;
}

.llw-post-answer-result-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.llw-post-answer-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.llw-post-answer-phrase {
    font-size: .86rem;
    line-height: 1.35;
}

.llw-post-answer-close,
.llw-post-answer-settings-toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: rgb(255 255 255 / 12%);
    font-size: 1.15rem;
    cursor: pointer;
}

.llw-post-answer-settings-toggle {
    color: #94a3b8;
    font-size: .88rem;
}

.llw-post-answer-settings-toggle[aria-expanded="true"],
.llw-post-answer-settings-toggle:hover,
.llw-post-answer-settings-toggle:focus-visible {
    color: #e2e8f0;
    background: #1e293b;
}

.llw-post-answer-divider {
    margin: 12px 0 10px;
    border-top: 1px solid #334155;
}

.llw-post-answer-rating-heading {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
}

.llw-post-answer-rating-scale {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px;
    margin-top: 10px;
}

.llw-post-answer-rating-value {
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 1px solid #64748b;
    border-radius: 8px;
    color: #e5edf8;
    background: #1e293b;
    font-weight: 700;
    cursor: pointer;
}

.llw-post-answer-rating-value:hover,
.llw-post-answer-rating-value:focus-visible {
    border-color: #60a5fa;
    background: #1d4ed8;
}

.llw-post-answer-rating-value:disabled,
.llw-post-answer-close:disabled,
.llw-post-answer-settings-toggle:disabled,
.llw-post-answer-skip:disabled {
    cursor: wait;
    opacity: .55;
}

.llw-post-answer-rating-labels,
.llw-post-answer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.llw-post-answer-rating-labels {
    margin-top: 4px;
    color: #94a3b8;
    font-size: .72rem;
}

.llw-post-answer-rating-status {
    min-height: 18px;
    margin-top: 5px;
    color: #fca5a5;
    font-size: .76rem;
}

.llw-post-answer-actions {
    min-height: 28px;
}

.llw-post-answer-skip {
    padding: 3px 0;
    border: 0;
    color: #bfdbfe;
    background: transparent;
    font-size: .78rem;
    cursor: pointer;
}

.llw-post-answer-settings-divider {
    margin-bottom: 8px;
}

.llw-post-answer-settings-heading {
    color: #cbd5e1;
    font-size: .78rem;
}

.llw-post-answer-settings-value {
    color: #f8fafc;
    font-weight: 700;
}

.llw-post-answer-settings-slider-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    color: #94a3b8;
    font-size: .68rem;
}

.llw-post-answer-settings-slider {
    width: 100%;
    min-width: 0;
    margin: 0;
    accent-color: #60a5fa;
}

@keyframes llw-reaction-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.llw-post-answer-card[data-motion="reduced"] {
    animation: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .llw-post-answer-card {
        animation: none;
        transform: none;
    }
}

@media (max-width: 620px) {
    .llw-statistics-popover {
        position: fixed;
        top: 72px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .llw-post-answer-host {
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
    }

    .llw-post-answer-card {
        padding-inline: 11px;
    }

    .llw-post-answer-rating-scale {
        gap: 3px;
    }
}
.llw-task-downloads {
    display: flex;
    align-items: center;
    gap: 6px;
}
.llw-task-downloads[hidden] { display: none; }
.llw-task-download { position: relative; width: 32px; height: 32px; padding: 6px; }
.llw-task-download svg { display: block; width: 20px; height: 20px; }
.llw-task-download:disabled { opacity: .5; cursor: wait; }
.llw-task-download:is(:hover, :focus-visible)::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    width: max-content;
    max-width: min(280px, 80vw);
    padding: 6px 9px;
    border: 1px solid var(--llw-border, #45576f);
    border-radius: 6px;
    background: var(--llw-panel, #142032);
    color: var(--llw-text, #dcecff);
    font-size: 12px;
    overflow-wrap: anywhere;
    pointer-events: none;
}
.llw-task-download-status { font-size: 12px; }
.llw-task-download-status:empty { display: none; }

/* Local Code typography also follows the answer when the IDE reparents it. */
.llw-workspace[data-active-tool="code"] .llw-answer-row textarea,
.llw-fullscreen-overlay .llw-code-tool .llw-answer-row textarea {
    font-size: var(--llw-code-font-size, 13px);
    line-height: 1.6;
}

/* Remote text selection never touches native textarea selection/focus. */
.llw-highlight::highlight(llw-remote-code-selection) {
    background-color: rgba(255, 190, 70, .24);
}
.llw-remote-code-caret {
    position: absolute;
    width: 2px;
    min-height: 1em;
    background: #ffbe46;
    pointer-events: none;
    z-index: 2;
}