/*
 * Steampunk presentation skins for the production Learning Workspace.
 *
 * The three identities share the existing DOM, events and server-authoritative
 * learning state. All selectors are intentionally restricted to exact skin
 * values. Motion is state-driven and no decorative JavaScript is required.
 */

:is(
    html[data-visual-skin="steampunk-engine"],
    html[data-visual-skin="steampunk-lab"],
    html[data-visual-skin="steampunk-analytical"],
    .llw-workspace[data-visual-skin="steampunk-engine"],
    .llw-workspace[data-visual-skin="steampunk-lab"],
    .llw-workspace[data-visual-skin="steampunk-analytical"],
    .llw-fullscreen-overlay[data-visual-skin="steampunk-engine"],
    .llw-fullscreen-overlay[data-visual-skin="steampunk-lab"],
    .llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"],
    .llw-mode-component[data-visual-skin="steampunk-engine"],
    .llw-mode-component[data-visual-skin="steampunk-lab"],
    .llw-mode-component[data-visual-skin="steampunk-analytical"]
) {
    color-scheme: dark;
    --sp-bg-deep: #0c0d0c;
    --sp-bg: #171713;
    --sp-metal-dark: #20211d;
    --sp-metal: #39382f;
    --sp-metal-light: #5a5748;
    --sp-brass-dark: #6f4a20;
    --sp-brass: #b7843c;
    --sp-brass-light: #e0bd72;
    --sp-copper-dark: #6e3424;
    --sp-copper: #a95836;
    --sp-patina: #49776c;
    --sp-wood-dark: #24140e;
    --sp-wood: #4e2c1c;
    --sp-leather: #39261b;
    --sp-glass: rgba(211, 230, 210, .12);
    --sp-glass-line: rgba(232, 241, 220, .32);
    --sp-work: #eee7d7;
    --sp-work-muted: #d8cfba;
    --sp-ink: #241f19;
    --sp-text: #f3ead6;
    --sp-text-soft: #d6c8ae;
    --sp-text-muted: #ad9f86;
    --sp-accent: #d38a3e;
    --sp-accent-soft: rgba(211, 138, 62, .2);
    --sp-positive: #77b98c;
    --sp-warning: #e2a449;
    --sp-danger: #d4644b;
    --sp-focus: #f4cf79;
    --sp-panel:
        linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 26%),
        linear-gradient(180deg, #34342d 0%, #22231f 48%, #191a17 100%);
    --sp-panel-inset:
        linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .025)),
        #151612;
    --sp-edge: rgba(216, 180, 108, .52);
    --sp-edge-soft: rgba(216, 180, 108, .22);
    --sp-shadow:
        0 18px 38px rgba(0, 0, 0, .42),
        inset 0 1px rgba(255, 255, 255, .07),
        inset 0 -1px rgba(0, 0, 0, .72);
    --sp-shadow-small:
        0 5px 12px rgba(0, 0, 0, .34),
        inset 0 1px rgba(255, 255, 255, .075),
        inset 0 -2px rgba(0, 0, 0, .44);
    --sp-radius: 8px;
    --sp-label-font: Georgia, "Times New Roman", serif;
    --sp-reading-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --sp-mono-font: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
}

html[data-visual-skin="steampunk-engine"],
.llw-workspace[data-visual-skin="steampunk-engine"],
.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"],
.llw-mode-component[data-visual-skin="steampunk-engine"] {
    --sp-bg-deep: #080b0b;
    --sp-bg: #111716;
    --sp-metal-dark: #171d1d;
    --sp-metal: #303938;
    --sp-metal-light: #52605d;
    --sp-brass-dark: #68451d;
    --sp-brass: #a97632;
    --sp-brass-light: #d2a758;
    --sp-copper-dark: #612e24;
    --sp-copper: #a54f32;
    --sp-patina: #3f7168;
    --sp-wood-dark: #1a120e;
    --sp-wood: #352016;
    --sp-accent: #e26b32;
    --sp-accent-soft: rgba(226, 107, 50, .21);
    --sp-focus: #ffd276;
    --sp-panel:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 5px),
        linear-gradient(145deg, rgba(126, 153, 147, .11), transparent 30%),
        linear-gradient(180deg, #303a38, #1d2423 52%, #121717);
}

html[data-visual-skin="steampunk-lab"],
.llw-workspace[data-visual-skin="steampunk-lab"],
.llw-fullscreen-overlay[data-visual-skin="steampunk-lab"],
.llw-mode-component[data-visual-skin="steampunk-lab"] {
    --sp-bg-deep: #130d0a;
    --sp-bg: #241713;
    --sp-metal-dark: #28231d;
    --sp-metal: #504538;
    --sp-metal-light: #756957;
    --sp-brass-dark: #765321;
    --sp-brass: #c39547;
    --sp-brass-light: #f0cf82;
    --sp-copper-dark: #743b2a;
    --sp-copper: #b96b46;
    --sp-patina: #4f8177;
    --sp-wood-dark: #2a130d;
    --sp-wood: #643822;
    --sp-leather: #4a3021;
    --sp-glass: rgba(222, 239, 227, .16);
    --sp-glass-line: rgba(242, 248, 233, .42);
    --sp-work: #f5edda;
    --sp-work-muted: #e5d8ba;
    --sp-ink: #2a2117;
    --sp-text: #fff2d7;
    --sp-text-soft: #e4d3b4;
    --sp-text-muted: #bfae91;
    --sp-accent: #8cc9b8;
    --sp-accent-soft: rgba(140, 201, 184, .18);
    --sp-focus: #ffe19a;
    --sp-panel:
        linear-gradient(135deg, rgba(255, 235, 187, .09), transparent 32%),
        linear-gradient(180deg, #4b4034, #312821 52%, #211a16);
    --sp-edge: rgba(239, 202, 125, .61);
    --sp-edge-soft: rgba(239, 202, 125, .28);
}

html[data-visual-skin="steampunk-analytical"],
.llw-workspace[data-visual-skin="steampunk-analytical"],
.llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"],
.llw-mode-component[data-visual-skin="steampunk-analytical"] {
    --sp-bg-deep: #0c0d0c;
    --sp-bg: #191a17;
    --sp-metal-dark: #20221f;
    --sp-metal: #41443e;
    --sp-metal-light: #686b61;
    --sp-brass-dark: #6d511f;
    --sp-brass: #b68a3c;
    --sp-brass-light: #e1bf69;
    --sp-copper-dark: #62392d;
    --sp-copper: #9b5f44;
    --sp-patina: #47746e;
    --sp-wood-dark: #221812;
    --sp-wood: #493323;
    --sp-leather: #352820;
    --sp-glass: rgba(225, 231, 213, .11);
    --sp-glass-line: rgba(235, 238, 220, .35);
    --sp-work: #eee8d7;
    --sp-work-muted: #d8d0ba;
    --sp-ink: #201e18;
    --sp-text: #f1ead8;
    --sp-text-soft: #d1c7ae;
    --sp-text-muted: #a79d85;
    --sp-accent: #d4ad55;
    --sp-accent-soft: rgba(212, 173, 85, .18);
    --sp-focus: #f3d87d;
    --sp-label-font: "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
    --sp-panel:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 13px),
        linear-gradient(145deg, rgba(255, 241, 196, .055), transparent 32%),
        linear-gradient(180deg, #3c3f3a, #272a26 55%, #191b19);
}

/* Site shell: enough material continuity to prevent a default frame around the Workspace. */
html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) body {
    color: var(--sp-text);
    background:
        radial-gradient(circle at 72% -12%, var(--sp-accent-soft), transparent 38%),
        radial-gradient(circle at 8% 105%, rgba(73, 119, 108, .13), transparent 36%),
        linear-gradient(145deg, var(--sp-bg-deep), var(--sp-bg) 54%, #090a09);
    font-family: var(--sp-reading-font);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.cabinet-shell, .cabinet-panel, .cabinet-sidebar, .cabinet-workspace, .cabinet-settings-card) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.cabinet-menu-button, .cabinet-sidebar-toggle, .page-mode-switch button) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .18));
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), inset 0 -2px rgba(0, 0, 0, .3);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.cabinet-menu-button.active, .cabinet-menu-button:hover, .page-mode-switch button.active) {
    border-color: var(--sp-brass);
    color: var(--sp-brass-light);
    background: linear-gradient(180deg, rgba(183, 132, 60, .2), rgba(32, 27, 20, .72));
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) [data-site-visual-skin-selector="true"] {
    min-height: 44px;
    border: 1px solid var(--sp-brass-dark);
    border-radius: 6px;
    color: var(--sp-text);
    background:
        linear-gradient(90deg, transparent 0 92%, rgba(224, 189, 114, .12) 92%),
        var(--sp-panel-inset);
    box-shadow: inset 0 4px 9px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .025);
}

/* Shared material tokens on the three real Workspace surfaces. */
:where(
    .llw-workspace[data-visual-skin="steampunk-engine"],
    .llw-workspace[data-visual-skin="steampunk-lab"],
    .llw-workspace[data-visual-skin="steampunk-analytical"],
    .llw-fullscreen-overlay[data-visual-skin="steampunk-engine"],
    .llw-fullscreen-overlay[data-visual-skin="steampunk-lab"],
    .llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"],
    .llw-mode-component[data-visual-skin="steampunk-engine"],
    .llw-mode-component[data-visual-skin="steampunk-lab"],
    .llw-mode-component[data-visual-skin="steampunk-analytical"]
) {
    --llw-surface: var(--sp-metal-dark);
    --llw-panel: var(--sp-metal);
    --llw-border: var(--sp-edge-soft);
    --llw-accent: var(--sp-accent);
    --llw-text: var(--sp-text);
    --llw-muted: var(--sp-text-muted);
    color: var(--sp-text);
    font-family: var(--sp-reading-font);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--sp-edge);
    border-radius: var(--sp-radius);
    color: var(--sp-text);
    background:
        radial-gradient(circle at 78% 2%, var(--sp-accent-soft), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 28%),
        var(--sp-bg-deep);
    box-shadow: var(--sp-shadow);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)::before,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)::after {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    content: "";
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)::before {
    top: 5px;
    right: 12px;
    left: 12px;
    height: 4px;
    border: 1px solid var(--sp-brass-dark);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--sp-brass-light), var(--sp-brass) 42%, var(--sp-brass-dark));
    box-shadow: 0 2px 5px rgba(0, 0, 0, .42);
    opacity: .72;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)::after {
    inset: 7px;
    border-radius: calc(var(--sp-radius) - 2px);
    background:
        radial-gradient(circle at 0 0, var(--sp-brass-light) 0 2px, var(--sp-brass-dark) 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 100% 0, var(--sp-brass-light) 0 2px, var(--sp-brass-dark) 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 0 100%, var(--sp-brass-light) 0 2px, var(--sp-brass-dark) 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at 100% 100%, var(--sp-brass-light) 0 2px, var(--sp-brass-dark) 2.5px 4px, transparent 4.5px);
    opacity: .7;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(h1, h2, h3, h4, .llw-panel-title, .llw-context-eyebrow, .llw-readiness-eyebrow) {
    color: var(--sp-brass-light);
    font-family: var(--sp-label-font);
    letter-spacing: .055em;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-muted, .llw-empty, .llw-condition-prompt, .llw-answer-status) {
    color: var(--sp-text-muted);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(button, input, textarea, select):focus-visible,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(button, input, textarea, select):focus-visible {
    outline: 3px solid var(--sp-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--sp-bg-deep), 0 0 0 5px rgba(244, 207, 121, .24);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(button, .llw-tree-row, .llw-file-tab, .lge-button, .lge-tool-button) {
    transition:
        transform 150ms cubic-bezier(.2, .8, .2, 1),
        border-color 150ms,
        color 150ms,
        background-color 150ms,
        box-shadow 150ms;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) button:not(:disabled):active,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) button:not(:disabled):active {
    transform: translateY(2px);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, .5);
}

/* Mode selector: one physical transmission with different machinery per identity. */
.llw-mode-component:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-selector,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-selector {
    position: relative;
    min-height: 46px;
    padding: 4px;
    border: 1px solid var(--sp-brass-dark);
    border-radius: 7px;
    background:
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(224, 189, 114, .12) 31px 32px),
        var(--sp-panel-inset);
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, .46), 0 1px rgba(255, 255, 255, .045);
}

.llw-mode-component:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-selector-thumb,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-selector-thumb {
    top: 4px;
    bottom: 4px;
    border: 1px solid var(--sp-brass-light);
    border-radius: 5px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .2), transparent 38%),
        linear-gradient(180deg, var(--sp-brass-light), var(--sp-brass) 48%, var(--sp-brass-dark));
    box-shadow: 0 3px 7px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .24);
    transform: translateX(calc(var(--llw-mode-index, 0) * 100%));
    transition: transform 260ms cubic-bezier(.18, .86, .2, 1);
}

.llw-mode-component:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-button,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-button {
    z-index: 1;
    min-height: 38px;
    color: var(--sp-text-soft);
    font-family: var(--sp-label-font);
    font-weight: 750;
    letter-spacing: .08em;
    text-shadow: 0 1px rgba(0, 0, 0, .72);
}

.llw-mode-component:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-button.is-active,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-mode-button.is-active {
    color: #21170c;
    text-shadow: 0 1px rgba(255, 255, 255, .24);
}

/* Readiness and Live Lesson control manifold. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-readiness-panel, .llw-live-lesson-topbar, .llw-live-lesson-strip) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-strip {
    position: relative;
    min-height: 54px;
    border: 1px solid var(--sp-brass-dark);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(169, 88, 54, .13), transparent 28% 72%, rgba(73, 119, 108, .12)),
        var(--sp-panel-inset);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-strip::before {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(224, 189, 114, .11);
    border-radius: 5px;
    pointer-events: none;
    content: "";
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(
    .llw-readiness-action,
    .llw-live-lesson-connection-action,
    .llw-live-lesson-space-button,
    .llw-live-lesson-device-action,
    .llw-live-lesson-timer,
    .llw-live-lesson-icon-button,
    .llw-live-lesson-qr
) {
    border: 1px solid var(--sp-brass-dark);
    border-radius: 6px;
    color: var(--sp-text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(0, 0, 0, .16)),
        var(--sp-metal-dark);
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(
    .llw-readiness-action,
    .llw-live-lesson-connection-action,
    .llw-live-lesson-space-button,
    .llw-live-lesson-device-action,
    .llw-live-lesson-timer,
    .llw-live-lesson-icon-button,
    .llw-live-lesson-qr
):not(:disabled):hover {
    border-color: var(--sp-brass-light);
    color: var(--sp-brass-light);
    transform: translateY(-1px);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-readiness-panel[data-readiness="ready"] .llw-readiness-badge,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-space-button.is-active {
    border-color: var(--sp-positive);
    color: #dff4df;
    background: linear-gradient(180deg, rgba(119, 185, 140, .22), rgba(22, 42, 29, .68));
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)[data-live-lesson-state="invited"] .llw-readiness-panel {
    border-color: var(--sp-brass-light);
    box-shadow: 0 0 0 1px var(--sp-accent-soft), var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)[data-live-lesson-state="terminal"] :is(.llw-live-lesson-topbar, .llw-readiness-panel) {
    border-color: rgba(173, 159, 134, .28);
    color: var(--sp-text-muted);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .25)),
        var(--sp-panel);
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, .28);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)[data-live-lesson-state="terminal"] .llw-live-lesson-strip {
    animation: none;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-peer-status {
    position: relative;
    min-width: 38px;
    min-height: 38px;
    border: 1px solid var(--sp-brass-dark);
    border-radius: 50%;
    color: var(--sp-text-soft);
    background:
        radial-gradient(circle at 40% 34%, rgba(255, 255, 255, .14), transparent 24%),
        radial-gradient(circle, var(--sp-glass), rgba(0, 0, 0, .42));
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .26), 0 2px 7px rgba(0, 0, 0, .38);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-peer-status::after {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(0, 0, 0, .55);
    border-radius: 50%;
    background: var(--sp-warning);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
    content: "";
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1), background-color 180ms;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-peer-status[data-connection-state="connected"]::after {
    background: var(--sp-positive);
    transform: translateY(-13px);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-peer-status[data-connection-state="disconnected"]::after {
    background: var(--sp-danger);
    transform: translate(-12px, 0);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-connection-action:disabled::after,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-list, .llw-condition-media)[aria-busy="true"]::after {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid var(--sp-brass-dark);
    border-top-color: var(--sp-brass-light);
    border-radius: 50%;
    vertical-align: -2px;
    content: "";
    animation: sp-pending-mechanism 850ms linear infinite;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-mic {
    position: relative;
    overflow: hidden;
    min-width: 42px;
    border-radius: 50%;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-mic::after {
    position: absolute;
    right: 7px;
    bottom: 8px;
    width: 14px;
    height: 2px;
    border-radius: 99px;
    background: var(--sp-danger);
    box-shadow: 0 0 5px currentColor;
    transform: rotate(-34deg);
    transform-origin: left center;
    content: "";
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1), background-color 180ms;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-mic[data-mic-state="microphone"]::after {
    background: var(--sp-positive);
    transform: rotate(34deg);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-mic[data-mic-state="disabled"]::after {
    background: var(--sp-text-muted);
    transform: rotate(-58deg);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-live-lesson-mic-level-bar, .llw-live-lesson-mic-gain-bar) {
    background: linear-gradient(180deg, var(--sp-brass-light), var(--sp-copper));
    transition: height 90ms linear, opacity 90ms linear;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-device-menu {
    border: 1px solid var(--sp-edge);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-end {
    border-color: rgba(212, 100, 75, .7);
    color: #ffd7ca;
    background: linear-gradient(180deg, rgba(164, 55, 38, .45), rgba(68, 25, 20, .76));
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-end-alert:not([hidden]) {
    border-left: 3px solid var(--sp-danger);
    color: #ffd7ca;
    background: rgba(102, 34, 25, .3);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-live-lesson-strip[data-lesson-timer="overtime"] .llw-live-lesson-timer {
    border-color: var(--sp-danger);
    color: #ffd1b5;
    animation: sp-pressure-warning 1.25s ease-in-out infinite;
}

/* Navigation, theme contacts and task selector bank. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-navigation, .llw-workspace-stage) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-navigation {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 16% 84%, rgba(0, 0, 0, .28)),
        var(--sp-panel);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-navigation-toggle {
    border-color: var(--sp-brass-dark);
    color: var(--sp-brass-light);
    background: linear-gradient(180deg, var(--sp-metal-light), var(--sp-metal-dark));
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.theme-button, .llw-theme-button, .task-key, .llw-task-button) {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--sp-edge-soft);
    border-radius: 5px;
    color: var(--sp-text-soft);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .065), transparent 38%),
        linear-gradient(180deg, var(--sp-metal), var(--sp-metal-dark));
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.theme-button, .llw-theme-button, .task-key, .llw-task-button):not(:disabled):hover {
    border-color: var(--sp-brass-light);
    color: var(--sp-text);
    transform: translateY(-1px);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(
    .theme-button.active,
    .theme-button.is-active,
    .llw-theme-button.active,
    .llw-theme-button.is-active,
    .task-key.active,
    .task-key.is-active,
    .task-key[aria-checked="true"],
    .llw-task-button.active,
    .llw-task-button.is-active,
    .llw-task-button[aria-checked="true"]
) {
    border-color: var(--sp-brass-light);
    color: #fff4d2;
    background:
        linear-gradient(145deg, rgba(224, 189, 114, .24), transparent 42%),
        linear-gradient(180deg, var(--sp-brass-dark), #332417);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 229, 157, .14);
    animation: sp-contact-engage 260ms cubic-bezier(.18, .86, .2, 1) both;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.task-key, .llw-task-button)::after {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(0, 0, 0, .55);
    border-radius: 50%;
    background: #594a32;
    content: "";
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.task-key, .llw-task-button).is-active::after,
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.task-key, .llw-task-button)[aria-checked="true"]::after {
    background: var(--sp-positive);
    box-shadow: 0 0 7px rgba(119, 185, 140, .62);
}

/* Current-context plate, tools and ordinary thinking timer. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-learning-context, .llw-metrics, .llw-tools, .llw-answer-panel) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-learning-context {
    background:
        linear-gradient(90deg, rgba(183, 132, 60, .11), transparent 26% 74%, rgba(73, 119, 108, .09)),
        var(--sp-panel-inset);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-context-route-code, .llw-context-task-number, .llw-context-progress-copy) {
    color: var(--sp-brass-light);
    font-family: var(--sp-mono-font);
    font-variant-numeric: tabular-nums;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-context-progress {
    border-color: var(--sp-brass-dark);
    background: rgba(0, 0, 0, .28);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-context-progress-track {
    background: linear-gradient(90deg, var(--sp-copper), var(--sp-brass-light));
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-timer-concepts {
    display: none;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-time-metric.llw-timer-instrument {
    position: relative;
    overflow: hidden;
    min-width: 126px;
    height: 52px;
    min-height: 52px;
    border: 2px solid var(--sp-brass-dark);
    color: var(--sp-ink);
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .7), transparent 20%),
        radial-gradient(circle, #f2ead6 0 54%, #cdbf9d 55% 61%, var(--sp-brass) 62% 68%, var(--sp-brass-dark) 69%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15), 0 4px 10px rgba(0, 0, 0, .42);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-timer-time-hud {
    position: relative;
    z-index: 2;
    color: var(--sp-ink);
    font-family: var(--sp-mono-font);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px rgba(255, 255, 255, .5);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-timer-time-hud :is(.llw-timer-elapsed, .llw-timer-separator, .llw-timer-recommended) {
    color: var(--sp-ink);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-timer-concepts {
    display: none;
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-time-metric.llw-timer-instrument {
    position: relative;
    overflow: hidden;
    min-width: 126px;
    height: 52px;
    min-height: 52px;
    border: 2px solid var(--sp-brass-dark);
    color: var(--sp-ink);
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, .7), transparent 20%),
        radial-gradient(circle, #f2ead6 0 54%, #cdbf9d 55% 61%, var(--sp-brass) 62% 68%, var(--sp-brass-dark) 69%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15), 0 4px 10px rgba(0, 0, 0, .42);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-timer-time-hud {
    position: relative;
    z-index: 2;
    color: var(--sp-ink);
    font-family: var(--sp-mono-font);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px rgba(255, 255, 255, .5);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-timer-time-hud :is(.llw-timer-elapsed, .llw-timer-separator, .llw-timer-recommended) {
    color: var(--sp-ink);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-tabs {
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--sp-brass-dark);
    border-radius: 7px;
    background: var(--sp-panel-inset);
    box-shadow: inset 0 4px 9px rgba(0, 0, 0, .4);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-tab {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--sp-edge-soft);
    border-radius: 5px;
    color: var(--sp-text-muted);
    background: linear-gradient(180deg, var(--sp-metal), var(--sp-metal-dark));
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-tab[aria-pressed="true"] {
    border-color: var(--sp-brass-light);
    color: var(--sp-brass-light);
    background: linear-gradient(180deg, rgba(183, 132, 60, .28), rgba(57, 39, 20, .78));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 225, 150, .13);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
).is-learning-tool-transitioning .llw-tool-tab[aria-pressed="true"] {
    animation: sp-coupling-engage 310ms cubic-bezier(.18, .86, .2, 1) both;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-active-mark {
    color: var(--sp-brass-light);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-tab-icon .llw-tool-icon svg * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

/* Readable condition chamber: steampunk belongs to the chrome, not the task image. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-condition-window, .llw-condition-embedded),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-condition-window, .llw-condition-embedded) {
    border: 2px solid var(--sp-brass-dark);
    border-radius: 7px;
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-condition-header, .llw-condition-embedded-header),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-condition-header, .llw-condition-embedded-header) {
    border-bottom: 1px solid var(--sp-edge-soft);
    color: var(--sp-brass-light);
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .16));
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-condition-media,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-condition-media {
    border: 1px solid var(--sp-glass-line);
    border-radius: 4px;
    color: var(--sp-ink);
    background:
        linear-gradient(rgba(255, 255, 255, .25), rgba(0, 0, 0, .025)),
        var(--sp-work);
    box-shadow: inset 0 0 18px rgba(79, 60, 31, .13);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-condition-task-image,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-condition-task-image {
    visibility: visible;
    background: #fff;
    filter: none;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-condition-prompt,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-condition-prompt {
    color: #655b49;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-condition-prompt.is-error {
    color: #8f2f25;
    animation: sp-pressure-drop 480ms ease-out both;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-condition-nav, .llw-condition-minimize, .llw-condition-restore, .llw-icon-button),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-condition-nav, .llw-condition-minimize, .llw-condition-restore, .llw-icon-button, .llw-fullscreen-close) {
    border-color: var(--sp-brass-dark);
    color: var(--sp-brass-light);
    background: linear-gradient(180deg, var(--sp-metal-light), var(--sp-metal-dark));
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-condition-splitter, .llw-themes-pane-splitter, .llw-project-splitter, .llw-console-splitter, .llw-answer-console-splitter, .llw-ide-height-handle) {
    background:
        repeating-linear-gradient(90deg, var(--sp-brass-dark) 0 3px, var(--sp-brass) 3px 4px, var(--sp-metal-dark) 4px 8px);
}

/* Secondary tools share the same instrument housing instead of a default dark card. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-tool-panel, .llw-text-editor, .llw-table-grid) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text);
    background: var(--sp-panel-inset);
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), inset 0 -3px 9px rgba(0, 0, 0, .36);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-panel > .llw-tool-heading {
    border-color: var(--sp-brass-dark);
    color: var(--sp-brass-light);
    background:
        linear-gradient(90deg, rgba(183, 132, 60, .14), transparent 42%),
        linear-gradient(180deg, var(--sp-metal), var(--sp-metal-dark));
    font-family: var(--sp-label-font);
    letter-spacing: .035em;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-text-editor {
    caret-color: var(--sp-brass-light);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-table-grid input {
    border-color: var(--sp-brass-dark);
    color: var(--sp-ink);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .42), transparent 36%),
        var(--sp-work);
}

/* Answer and status remain the clearest action surface. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-panel,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-panel {
    border: 1px solid var(--sp-edge);
    border-radius: 7px;
    background:
        linear-gradient(90deg, rgba(183, 132, 60, .12), transparent 24%),
        var(--sp-panel);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-row :is(input, textarea),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-row :is(input, textarea) {
    border: 1px solid #9d865d;
    border-radius: 5px;
    color: var(--sp-ink);
    -webkit-text-fill-color: var(--sp-ink);
    caret-color: #7c341f;
    background: var(--sp-work);
    box-shadow: inset 0 3px 7px rgba(74, 50, 25, .2), 0 1px rgba(255, 255, 255, .06);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-row :is(input, textarea)::placeholder,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-row :is(input, textarea)::placeholder {
    color: #716753;
    -webkit-text-fill-color: #716753;
    opacity: 1;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-status:not(:empty),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-answer-status:not(:empty) {
    border-left: 3px solid var(--sp-brass);
    padding-left: 9px;
    color: var(--sp-text-soft);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-empty.is-error {
    position: relative;
    overflow: hidden;
    border-color: var(--sp-danger);
    color: #ffd7ca;
    background: rgba(95, 31, 24, .35);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-empty.is-error::before {
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 36px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 225, 199, .34), transparent 68%);
    content: "";
    animation: sp-steam-release 620ms ease-out 1 both;
}

/* Statistics glass. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-statistics-popover {
    border: 1px solid var(--sp-edge);
    color: var(--sp-text);
    background:
        linear-gradient(145deg, var(--sp-glass), transparent 36%),
        var(--sp-panel);
    box-shadow: var(--sp-shadow);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-statistics-row, .llw-statistics-section) {
    border-color: var(--sp-edge-soft);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-statistics-value {
    color: var(--sp-brass-light);
    font-family: var(--sp-mono-font);
}

/* Code: familiar editor core, fully integrated mechanical chrome. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-code-tool,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-code-tool {
    border: 1px solid var(--sp-edge);
    border-radius: 7px;
    color: var(--sp-text);
    background: var(--sp-panel-inset);
    box-shadow: var(--sp-shadow);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-code-toolbar, .llw-project-panel, .llw-file-tabs, .llw-console-panel),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-code-toolbar, .llw-project-panel, .llw-file-tabs, .llw-console-panel) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text-soft);
    background: var(--sp-panel);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-tree-row, .llw-file-tab),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-tree-row, .llw-file-tab) {
    border-color: transparent;
    color: var(--sp-text-soft);
    background: transparent;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-tree-row[active], .llw-tree-row[aria-selected="true"], .llw-file-tab[active], .llw-file-tab[aria-selected="true"]),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-tree-row[active], .llw-tree-row[aria-selected="true"], .llw-file-tab[active], .llw-file-tab[aria-selected="true"]) {
    border-color: var(--sp-brass-dark);
    color: var(--sp-brass-light);
    background: rgba(183, 132, 60, .13);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-tree-task-files-group, .llw-tree-root-group),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-tree-task-files-group, .llw-tree-root-group) {
    border-left: 1px solid var(--sp-brass-dark);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-editor-workspace, .llw-editor-shell, .llw-code-pane),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-editor-workspace, .llw-editor-shell, .llw-code-pane) {
    border-color: var(--sp-edge-soft);
    background: #111513;
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-line-numbers, .llw-code-area, .llw-highlight, textarea.llw-editor),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-line-numbers, .llw-code-area, .llw-highlight, textarea.llw-editor) {
    font-family: var(--sp-mono-font);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-code-search, .llw-autocomplete),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.llw-code-search, .llw-autocomplete) {
    border: 1px solid var(--sp-edge);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-console-output,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-console-output {
    border-top: 1px solid var(--sp-edge-soft);
    color: #e9e1ce;
    background:
        repeating-linear-gradient(180deg, transparent 0 20px, rgba(220, 198, 151, .035) 20px 21px),
        #101210;
    font-family: var(--sp-mono-font);
}

/* Graphics: only the chrome changes; the drawing world remains functional. */
.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-root,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-root {
    border: 1px solid var(--sp-edge);
    border-radius: 7px;
    color: var(--sp-text);
    background: var(--sp-panel-inset);
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lge-toolbar, .lge-toolbar-group, .lge-shape-palette, .lge-confirmation-dialog),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lge-toolbar, .lge-toolbar-group, .lge-shape-palette, .lge-confirmation-dialog) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text-soft);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lge-button, .lge-tool-button, .lge-icon-button, .lge-shape-option, .lge-view-button),
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lge-button, .lge-tool-button, .lge-icon-button, .lge-shape-option, .lge-view-button) {
    border-color: var(--sp-brass-dark);
    color: var(--sp-text-soft);
    background: linear-gradient(180deg, var(--sp-metal), var(--sp-metal-dark));
    box-shadow: var(--sp-shadow-small);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-tool-button.is-active,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-tool-button.is-active {
    border-color: var(--sp-brass-light);
    color: var(--sp-brass-light);
    background: rgba(183, 132, 60, .2);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-viewport,
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-viewport {
    border: 2px solid var(--sp-brass-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-status[data-kind="success"] {
    color: #d8f0dc;
    background: rgba(47, 100, 62, .36);
}

.llw-workspace:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lge-status[data-kind="error"] {
    color: #ffd7ca;
    background: rgba(115, 38, 29, .36);
}

/* One reparented fullscreen surface, not a second Workspace. */
.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) {
    color: var(--sp-text);
    background:
        radial-gradient(circle at 72% -12%, var(--sp-accent-soft), transparent 36%),
        linear-gradient(145deg, var(--sp-bg-deep), var(--sp-bg));
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
).is-drawing-fullscreen[data-ide-theme] {
    background:
        radial-gradient(circle at 72% -12%, var(--sp-accent-soft), transparent 36%),
        linear-gradient(145deg, var(--sp-bg-deep), var(--sp-bg));
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
).is-drawing-fullscreen[data-ide-theme] > :is(.llw-metrics, .llw-tools) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)[data-ide-theme] > .llw-condition-window :is(.llw-condition-header, .llw-condition-controls) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-brass-light);
    background:
        linear-gradient(90deg, rgba(183, 132, 60, .13), transparent 42%),
        var(--sp-panel);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
).is-embedded-condition[data-ide-theme] :is(.llw-condition-embedded-header, .llw-condition-header, .llw-condition-controls) {
    border-color: var(--sp-edge-soft);
    color: var(--sp-brass-light);
    background:
        linear-gradient(90deg, rgba(183, 132, 60, .13), transparent 42%),
        var(--sp-panel);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"] .llw-time-metric.llw-timer-instrument {
    border-radius: 50% 50% 42% 42%;
    background:
        repeating-conic-gradient(from -65deg, rgba(54, 39, 24, .75) 0 1deg, transparent 1deg 12deg),
        radial-gradient(circle at 38% 27%, rgba(255, 255, 255, .72), transparent 18%),
        radial-gradient(circle, #e9dfc8 0 54%, #a89673 55% 59%, #a97632 60% 68%, #4f3319 69%);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"] .llw-timer-time-hud {
    margin: 1px 50px 0 2px;
    padding: 3px 6px;
    border: 1px solid #5b3b1a;
    border-radius: 3px;
    color: #f4e6c6;
    background: linear-gradient(180deg, #38362e, #171a18);
    text-shadow: 0 1px #000;
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"] .llw-timer-time-hud :is(.llw-timer-elapsed, .llw-timer-separator, .llw-timer-recommended) {
    color: #f4e6c6;
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"] .llw-timer-instrument .llw-time-progress-track {
    right: 10px;
    bottom: 5px;
    left: auto;
    width: 58px;
    height: 6px;
    border-color: #5b3b1a;
    background: #17130f;
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-lab"] .llw-time-metric.llw-timer-instrument {
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 0 15%, rgba(55, 139, 157, .25) 15% 17%, rgba(123, 192, 137, .25) 17% 19%, rgba(210, 176, 75, .25) 19% 21%, transparent 21%),
        linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(214, 225, 204, .34)),
        #ece5d2;
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-lab"] .llw-timer-instrument .llw-time-progress-track {
    right: 9px;
    bottom: 8px;
    left: auto;
    width: 40px;
    height: 7px;
    border-color: rgba(68, 86, 73, .55);
    background: rgba(46, 69, 60, .22);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"] .llw-time-metric.llw-timer-instrument {
    border-radius: 4px;
    background:
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(81, 58, 22, .38) 31px 33px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, #e8dfc8, #b8aa8a);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"] .llw-timer-time-hud {
    padding: 4px 7px;
    border: 1px solid rgba(59, 45, 22, .42);
    border-radius: 2px;
    background: rgba(255, 250, 229, .32);
    letter-spacing: .08em;
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"] .llw-timer-instrument .llw-time-progress-track {
    right: 7px;
    bottom: 4px;
    left: 7px;
    height: 4px;
    border-radius: 1px;
    background: repeating-linear-gradient(90deg, #2d2b22 0 13px, #7c6330 13px 14px);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-tabs {
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--sp-brass-dark);
    border-radius: 7px;
    background: var(--sp-panel-inset);
    box-shadow: inset 0 4px 9px rgba(0, 0, 0, .4);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-tab {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--sp-edge-soft);
    color: var(--sp-text-muted);
    background: linear-gradient(180deg, var(--sp-metal), var(--sp-metal-dark));
    box-shadow: var(--sp-shadow-small);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-tool-tab-icon .llw-tool-icon svg * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"] .llw-tool-tab {
    border-radius: 3px;
    color: #c8b58f;
    background:
        radial-gradient(circle at 5px 5px, #c29649 0 1px, transparent 1.5px),
        linear-gradient(180deg, #4b5552, #1b2221 62%, #101514);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-lab"] .llw-tool-tab {
    border-color: #b78d45;
    border-radius: 6px;
    color: #3c3327;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .7), transparent 38%),
        linear-gradient(180deg, #efe6d0, #c8b995);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"] .llw-tool-tab {
    overflow: hidden;
    border-radius: 2px;
    color: #d2c39d;
    background:
        repeating-linear-gradient(90deg, rgba(233, 205, 132, .11) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #4b4e47, #222520);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"] .llw-tool-tab[aria-pressed="true"] {
    color: #ffd3a5;
    background: linear-gradient(180deg, #783621, #301914);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-lab"] .llw-tool-tab[aria-pressed="true"] {
    border-color: #8cc9b8;
    color: #193d36;
    background: linear-gradient(180deg, #dce8d8, #a9c7b7);
}

.llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"] .llw-tool-tab[aria-pressed="true"] {
    color: #f1d783;
    background:
        repeating-linear-gradient(90deg, rgba(255, 236, 178, .15) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #745b29, #352913);
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
)::before {
    position: fixed;
    z-index: -1;
    inset: 8px;
    border: 1px solid var(--sp-edge);
    border-radius: 9px;
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .22);
    pointer-events: none;
    content: "";
}

.llw-fullscreen-overlay:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-fullscreen-close {
    border: 1px solid var(--sp-brass-dark);
    color: var(--sp-brass-light);
    background: var(--sp-panel);
    box-shadow: var(--sp-shadow-small);
}

/* Body-level QR, teacher-note and reaction/rating portals. */
html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .lcs-overlay {
    background: rgba(8, 8, 7, .76);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lcs-modal, .teacher-note-laptop__flyout, .llw-post-answer-card) {
    border: 1px solid var(--sp-edge);
    border-radius: 8px;
    color: var(--sp-text);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 30%),
        var(--sp-panel);
    box-shadow: var(--sp-shadow);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lcs-modal-header, .llw-post-answer-result, .llw-post-answer-divider) {
    border-color: var(--sp-edge-soft);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lcs-qr-frame, .teacher-note-laptop__qr) {
    border: 5px solid var(--sp-brass-dark);
    background: var(--sp-work);
    box-shadow: inset 0 0 0 1px var(--sp-brass-light), 0 5px 13px rgba(0, 0, 0, .35);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) :is(.lcs-close-button, .teacher-note-laptop__trigger, .teacher-note-laptop__copy-action, .llw-post-answer-close, .llw-post-answer-skip) {
    border-color: var(--sp-brass-dark);
    color: var(--sp-text-soft);
    background: linear-gradient(180deg, var(--sp-metal), var(--sp-metal-dark));
    box-shadow: var(--sp-shadow-small);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-post-answer-card.is-positive {
    border-color: var(--sp-positive);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-post-answer-card.is-positive::before {
    background: var(--sp-positive);
    animation: sp-confirm-stabilize 520ms ease-out 1 both;
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-post-answer-card.is-wrong {
    border-color: var(--sp-danger);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-post-answer-rating-value {
    border: 1px solid var(--sp-brass-dark);
    color: var(--sp-text-soft);
    background: var(--sp-panel-inset);
}

html:is(
    [data-visual-skin="steampunk-engine"],
    [data-visual-skin="steampunk-lab"],
    [data-visual-skin="steampunk-analytical"]
) .llw-post-answer-rating-value:is(:hover, :focus-visible, [aria-pressed="true"]) {
    border-color: var(--sp-brass-light);
    color: #2b1e0e;
    background: linear-gradient(180deg, var(--sp-brass-light), var(--sp-brass));
}

/* A — heavy boiler backhead: blued steel, copper manifold and furnace light. */
.llw-workspace[data-visual-skin="steampunk-engine"] {
    background:
        radial-gradient(ellipse at 82% 8%, rgba(226, 107, 50, .17), transparent 30%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .017) 0 1px, transparent 1px 5px),
        #0b100f;
}

.llw-workspace[data-visual-skin="steampunk-engine"]::before {
    height: 7px;
    border-color: #c16c43;
    background: linear-gradient(180deg, #d98a5d, #a34c31 48%, #59261e);
    box-shadow: 0 2px 0 #16100d, 0 4px 8px rgba(0, 0, 0, .55);
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-live-lesson-strip {
    border-width: 2px;
    background:
        linear-gradient(90deg, rgba(165, 79, 50, .25), transparent 34% 68%, rgba(63, 113, 104, .18)),
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(193, 108, 67, .11) 46px 48px),
        #18201f;
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-mode-selector-thumb {
    border-color: #ea8e61;
    background:
        linear-gradient(90deg, transparent 0 42%, rgba(255, 225, 191, .28) 43% 55%, transparent 56%),
        linear-gradient(180deg, #a9432c, #70271f);
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-time-metric.llw-timer-instrument {
    border-radius: 50% 50% 42% 42%;
    background:
        repeating-conic-gradient(from -65deg, rgba(54, 39, 24, .75) 0 1deg, transparent 1deg 12deg),
        radial-gradient(circle at 38% 27%, rgba(255, 255, 255, .72), transparent 18%),
        radial-gradient(circle, #e9dfc8 0 54%, #a89673 55% 59%, #a97632 60% 68%, #4f3319 69%);
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-time-metric.llw-timer-instrument::after {
    position: absolute;
    right: 16px;
    bottom: 12px;
    width: 38px;
    height: 3px;
    border-radius: 99px;
    background: #9c3524;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    transform: rotate(-18deg);
    transform-origin: left center;
    content: "";
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-timer-time-hud {
    margin: 1px 50px 0 2px;
    padding: 3px 6px;
    border: 1px solid #5b3b1a;
    border-radius: 3px;
    color: #f4e6c6;
    background: linear-gradient(180deg, #38362e, #171a18);
    text-shadow: 0 1px #000;
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-timer-time-hud :is(.llw-timer-elapsed, .llw-timer-separator, .llw-timer-recommended) {
    color: #f4e6c6;
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-timer-instrument .llw-time-progress-track {
    right: 10px;
    bottom: 5px;
    left: auto;
    width: 58px;
    height: 6px;
    border-color: #5b3b1a;
    background: #17130f;
}

.llw-workspace[data-visual-skin="steampunk-engine"] :is(.llw-navigation, .llw-project-panel) {
    background:
        radial-gradient(circle at 9px 9px, #c79a4d 0 2px, #5c3b18 2.5px 4px, transparent 4.5px),
        radial-gradient(circle at calc(100% - 9px) 9px, #c79a4d 0 2px, #5c3b18 2.5px 4px, transparent 4.5px),
        var(--sp-panel);
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-live-lesson-peer-status[data-connection-state="connected"] {
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .28), 0 0 12px rgba(119, 185, 140, .22);
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-live-lesson-connection-action[data-connection-action="reconnect"] {
    border-color: #c16c43;
    color: #ffd0ac;
    background: linear-gradient(180deg, rgba(165, 79, 50, .4), rgba(66, 30, 24, .78));
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-tool-tab {
    border-radius: 3px;
    color: #c8b58f;
    background:
        radial-gradient(circle at 5px 5px, #c29649 0 1px, transparent 1.5px),
        linear-gradient(180deg, #4b5552, #1b2221 62%, #101514);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -3px #080b0b, 0 3px 6px rgba(0, 0, 0, .45);
}

.llw-workspace[data-visual-skin="steampunk-engine"] .llw-tool-tab[aria-pressed="true"] {
    color: #ffd3a5;
    background: linear-gradient(180deg, #783621, #301914);
    transform: translateY(1px);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .52), 0 1px 2px rgba(0, 0, 0, .45);
}

/* B — inventor laboratory: mahogany case, polished instruments and spectral calibration. */
.llw-workspace[data-visual-skin="steampunk-lab"] {
    border-color: #d7aa59;
    background:
        radial-gradient(circle at 75% 0, rgba(248, 219, 157, .14), transparent 34%),
        repeating-linear-gradient(3deg, rgba(255, 229, 177, .025) 0 1px, transparent 1px 7px),
        linear-gradient(90deg, rgba(91, 42, 24, .24), transparent 14% 86%, rgba(91, 42, 24, .24)),
        #1c120f;
}

.llw-workspace[data-visual-skin="steampunk-lab"]::before {
    height: 3px;
    border: 0;
    background: linear-gradient(90deg, #b96b46, #e6c069 26%, #8cc9b8 51%, #a782d4 71%, #b96b46);
    box-shadow: 0 2px 6px rgba(140, 201, 184, .23);
}

.llw-workspace[data-visual-skin="steampunk-lab"] :is(.llw-navigation, .llw-learning-context, .llw-code-toolbar, .llw-project-panel) {
    background:
        radial-gradient(circle at 9px 9px, #e0be72 0 1.5px, #765321 2px 3.5px, transparent 4px),
        radial-gradient(circle at calc(100% - 9px) 9px, #e0be72 0 1.5px, #765321 2px 3.5px, transparent 4px),
        linear-gradient(90deg, rgba(255, 225, 168, .04), transparent 20% 80%, rgba(255, 225, 168, .04)),
        repeating-linear-gradient(4deg, rgba(255, 233, 188, .025) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, #54311f, #3a2118 48%, #251610);
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-live-lesson-strip {
    border-color: #d4ae63;
    background:
        linear-gradient(90deg, rgba(140, 201, 184, .12), transparent 25% 75%, rgba(195, 149, 71, .16)),
        linear-gradient(180deg, rgba(255, 248, 221, .055), rgba(35, 27, 21, .8));
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-mode-selector {
    border-color: #d4ae63;
    background:
        repeating-linear-gradient(90deg, transparent 0 15px, rgba(241, 219, 169, .14) 15px 16px),
        linear-gradient(180deg, #172823, #101b18);
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-mode-selector-thumb {
    border-color: #f0d58e;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .32), transparent 36%),
        linear-gradient(180deg, #e5c270, #a8792f);
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-time-metric.llw-timer-instrument {
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 0 15%, rgba(55, 139, 157, .25) 15% 17%, rgba(123, 192, 137, .25) 17% 19%, rgba(210, 176, 75, .25) 19% 21%, transparent 21%),
        linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(214, 225, 204, .34)),
        #ece5d2;
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-time-metric.llw-timer-instrument::after {
    position: absolute;
    right: 9px;
    bottom: 8px;
    width: 38px;
    height: 9px;
    border: 1px solid rgba(68, 86, 73, .55);
    border-radius: 999px;
    background: radial-gradient(circle at 58% 50%, rgba(255, 255, 255, .86) 0 3px, transparent 3.5px), rgba(89, 157, 133, .28);
    content: "";
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-timer-instrument .llw-time-progress-track {
    right: 9px;
    bottom: 8px;
    left: auto;
    width: 40px;
    height: 7px;
    border-color: rgba(68, 86, 73, .55);
    background: rgba(46, 69, 60, .22);
}

.llw-workspace[data-visual-skin="steampunk-lab"] :is(.theme-button, .llw-theme-button, .task-key, .llw-task-button) {
    border-color: rgba(222, 194, 134, .42);
    color: #3a2d1f;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .7), transparent 35%),
        linear-gradient(180deg, #e9ddc2, #cabc9d);
    text-shadow: 0 1px rgba(255, 255, 255, .5);
}

.llw-workspace[data-visual-skin="steampunk-lab"] :is(
    .theme-button.active,
    .theme-button.is-active,
    .llw-theme-button.active,
    .llw-theme-button.is-active,
    .task-key.active,
    .task-key.is-active,
    .task-key[aria-checked="true"],
    .llw-task-button.active,
    .llw-task-button.is-active,
    .llw-task-button[aria-checked="true"]
) {
    border-color: #f0cf82;
    color: #fff4d8;
    background: linear-gradient(180deg, #806238, #42301e);
    text-shadow: 0 1px rgba(0, 0, 0, .7);
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-tool-tab {
    border-color: #b78d45;
    border-radius: 6px;
    color: #3c3327;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .7), transparent 38%),
        linear-gradient(180deg, #efe6d0, #c8b995);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), 0 3px 7px rgba(0, 0, 0, .36);
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-tool-tab[aria-pressed="true"] {
    border-color: #8cc9b8;
    color: #193d36;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .68), transparent 38%),
        linear-gradient(180deg, #dce8d8, #a9c7b7);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 -3px #5b9e8d;
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-live-lesson-peer-status[data-connection-state="connected"] {
    background:
        radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .45), transparent 20%),
        radial-gradient(circle, rgba(104, 189, 161, .24), rgba(15, 30, 26, .75));
}

/* C — analytical engine: register banks, punched cards and a precision print mechanism. */
.llw-workspace[data-visual-skin="steampunk-analytical"] {
    border-color: #ba994e;
    background:
        repeating-linear-gradient(90deg, rgba(211, 176, 87, .055) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px),
        #111311;
}

.llw-workspace[data-visual-skin="steampunk-analytical"]::before {
    height: 6px;
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, #4f3b19 0 4px, #d6b35d 4px 10px, #7b5b24 10px 12px);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] :is(.llw-navigation, .llw-project-panel) {
    background:
        repeating-linear-gradient(180deg, transparent 0 28px, rgba(214, 179, 93, .1) 28px 29px),
        linear-gradient(90deg, #252822, #33372f 52%, #22251f);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-live-lesson-strip {
    background:
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(212, 173, 85, .1) 22px 23px),
        linear-gradient(180deg, #30332e, #171a17);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-mode-selector-thumb {
    border-radius: 2px;
    background:
        repeating-linear-gradient(90deg, rgba(38, 29, 14, .32) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, #e0bd69, #987128);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-time-metric.llw-timer-instrument {
    border-radius: 4px;
    background:
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(81, 58, 22, .38) 31px 33px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, #e8dfc8, #b8aa8a);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-timer-time-hud {
    padding: 4px 7px;
    border: 1px solid rgba(59, 45, 22, .42);
    border-radius: 2px;
    background: rgba(255, 250, 229, .32);
    letter-spacing: .08em;
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-timer-instrument .llw-time-progress-track {
    right: 7px;
    bottom: 4px;
    left: 7px;
    height: 4px;
    border-radius: 1px;
    background:
        repeating-linear-gradient(90deg, #2d2b22 0 13px, #7c6330 13px 14px);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-tool-tab {
    overflow: hidden;
    border-radius: 2px;
    color: #d2c39d;
    background:
        repeating-linear-gradient(90deg, rgba(233, 205, 132, .11) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #4b4e47, #222520);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -2px #11130f, 0 3px 6px rgba(0, 0, 0, .38);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-tool-tab[aria-pressed="true"] {
    color: #f1d783;
    background:
        repeating-linear-gradient(90deg, rgba(255, 236, 178, .15) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #745b29, #352913);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] :is(.task-key, .llw-task-button) {
    overflow: hidden;
    border-radius: 3px;
    font-family: var(--sp-mono-font);
    font-variant-numeric: tabular-nums;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 9px),
        linear-gradient(180deg, #4b4f47, #272a26);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] :is(.task-key, .llw-task-button).is-active,
.llw-workspace[data-visual-skin="steampunk-analytical"] :is(.task-key, .llw-task-button)[aria-checked="true"] {
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 9px),
        linear-gradient(180deg, #8a6d32, #493818);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-file-tab {
    position: relative;
    border-radius: 2px 2px 0 0;
    background:
        radial-gradient(circle at 8px 5px, #171915 0 2px, transparent 2.5px),
        radial-gradient(circle at calc(100% - 8px) 5px, #171915 0 2px, transparent 2.5px),
        #4b4c43;
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-file-tab[aria-selected="true"],
.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-file-tab[active] {
    background:
        radial-gradient(circle at 8px 5px, #171915 0 2px, transparent 2.5px),
        radial-gradient(circle at calc(100% - 8px) 5px, #171915 0 2px, transparent 2.5px),
        linear-gradient(180deg, #80662f, #4b3a1e);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-tree-row {
    font-family: var(--sp-mono-font);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-console-panel {
    border-top: 3px double var(--sp-brass-dark);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-console-output {
    background:
        linear-gradient(90deg, rgba(214, 179, 93, .08), transparent 14% 86%, rgba(214, 179, 93, .08)),
        repeating-linear-gradient(180deg, #171916 0 20px, #24251f 20px 21px);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-tool-tab[aria-pressed="true"]::after {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 10px;
    height: 10px;
    border: 2px dotted var(--sp-brass-light);
    border-radius: 50%;
    transform: translateY(-50%) rotate(22.5deg);
    content: "";
}

/* Variant-specific Code housings also follow the reparented fullscreen editor. */
.llw-workspace[data-visual-skin="steampunk-engine"] .llw-code-tool.llw-tool-panel :is(
    .llw-code-toolbar, .llw-project-panel, .llw-project-heading, .llw-file-tabs, .llw-console-panel, .llw-console-header
),
.llw-fullscreen-overlay[data-visual-skin="steampunk-engine"] .llw-code-tool.llw-tool-panel :is(
    .llw-code-toolbar, .llw-project-panel, .llw-project-heading, .llw-file-tabs, .llw-console-panel, .llw-console-header
) {
    border-color: rgba(193, 108, 67, .34);
    color: #ddd0b6;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, #39423f, #1c2322 58%, #111615);
}

.llw-workspace[data-visual-skin="steampunk-lab"] .llw-code-tool.llw-tool-panel :is(
    .llw-code-toolbar, .llw-project-panel, .llw-project-heading, .llw-file-tabs, .llw-console-panel, .llw-console-header
),
.llw-fullscreen-overlay[data-visual-skin="steampunk-lab"] .llw-code-tool.llw-tool-panel :is(
    .llw-code-toolbar, .llw-project-panel, .llw-project-heading, .llw-file-tabs, .llw-console-panel, .llw-console-header
) {
    border-color: rgba(218, 182, 108, .38);
    color: #efe2c5;
    background:
        radial-gradient(circle at 9px 9px, #dec276 0 1px, transparent 1.5px),
        linear-gradient(145deg, rgba(255, 239, 201, .055), transparent 32%),
        linear-gradient(180deg, #554536, #35291f 56%, #211a15);
}

.llw-workspace[data-visual-skin="steampunk-analytical"] .llw-code-tool.llw-tool-panel :is(
    .llw-code-toolbar, .llw-project-panel, .llw-project-heading, .llw-file-tabs, .llw-console-panel, .llw-console-header
),
.llw-fullscreen-overlay[data-visual-skin="steampunk-analytical"] .llw-code-tool.llw-tool-panel :is(
    .llw-code-toolbar, .llw-project-panel, .llw-project-heading, .llw-file-tabs, .llw-console-panel, .llw-console-header
) {
    border-color: rgba(198, 163, 81, .32);
    color: #d8cfb6;
    background:
        repeating-linear-gradient(90deg, rgba(227, 191, 102, .055) 0 1px, transparent 1px 14px),
        linear-gradient(180deg, #444840, #292d28 58%, #191c19);
}

@keyframes sp-contact-engage {
    0% { transform: translateY(2px) scale(.96); }
    70% { transform: translateY(-1px) scale(1.015); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes sp-coupling-engage {
    0% { transform: translateY(2px) rotate(-1deg); }
    55% { transform: translateY(-2px) rotate(.7deg); }
    100% { transform: translateY(0) rotate(0); }
}

@keyframes sp-pending-mechanism {
    to { transform: rotate(1turn); }
}

@keyframes sp-pressure-warning {
    50% {
        border-color: #f18a5c;
        box-shadow: 0 0 12px rgba(226, 107, 50, .3), inset 0 0 8px rgba(100, 24, 18, .3);
    }
}

@keyframes sp-pressure-drop {
    0% { opacity: .35; transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes sp-steam-release {
    0% { opacity: 0; transform: translate(7px, 9px) scale(.5); }
    42% { opacity: .8; }
    100% { opacity: 0; transform: translate(-7px, -16px) scale(1.35); }
}

@keyframes sp-confirm-stabilize {
    0% { opacity: .25; transform: scaleX(.15); }
    100% { opacity: 1; transform: scaleX(1); }
}

/* Geometry remains the shared responsive Workspace; skins only reduce ornament. */
@media (max-width: 1120px) {
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    )::before {
        right: 9px;
        left: 9px;
    }

    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) .llw-time-metric.llw-timer-instrument {
        min-width: 116px;
    }
}

@media (max-width: 900px) {
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    )::before,
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    )::after {
        display: none;
    }

    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) .llw-live-lesson-strip {
        min-height: 48px;
    }
}

@media (max-width: 820px) {
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) .llw-time-metric.llw-timer-instrument {
        min-width: 104px;
        min-height: 54px;
    }

    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) .llw-tool-tabs {
        gap: 4px;
        padding: 3px;
    }
}

@media (max-width: 620px) {
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) :is(.llw-live-lesson-strip, .llw-learning-context, .llw-metrics, .llw-tools, .llw-answer-panel) {
        border-radius: 4px;
    }

    .llw-fullscreen-overlay:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    )::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ),
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) *,
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) *::before,
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) *::after,
    .llw-fullscreen-overlay:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) *,
    .llw-fullscreen-overlay:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ),
    .llw-mode-component:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ),
    .llw-mode-component:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) *,
    .llw-mode-component:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) *::before,
    .llw-mode-component:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) *::after,
    html:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) .llw-post-answer-card::before {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) .llw-empty.is-error::before {
        display: none;
    }
}

@media (forced-colors: active) {
    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ),
    .llw-fullscreen-overlay:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) {
        border: 1px solid CanvasText;
        color: CanvasText;
        background: Canvas;
        forced-color-adjust: auto;
    }

    .llw-workspace:is(
        [data-visual-skin="steampunk-engine"],
        [data-visual-skin="steampunk-lab"],
        [data-visual-skin="steampunk-analytical"]
    ) :is(button, input, textarea, select):focus-visible {
        outline: 3px solid Highlight;
    }
}