/* ============================================================================
   The scenes of the documentation's Learn entry (Pages/Docs/Scenes, drawn by DocsHome.razor),
   adapted from the drawings the program's Welcome page stands each area on
   (src/Desktop/Lab.Desktop.Web/Static/css/welcome.css, "The drawing's canvas" to "Account"). The
   parts are the program's (its nodes, glyphs, chips, badges, switches, lines with running dashes),
   drawn the way the program draws them; what is the site's own is how they stand. A scene is drawn
   beside its area's words, in three fifths of the column, so it is slimmed to a few parts set at the
   site's own type size (no word under 11 px) on a grid of named areas each scene lays out below; on
   a box as narrow as a phone's the same parts stand in one column, at the screen's width, with no
   sideways scroll. Loaded by the entry alone.

   The program's rules read its own tokens (--color-*). The canvas gives each of them the value of
   the site's token for the same role (app.css, docs/brand/brand.md), so a scene reads in the site's
   light and dark themes as the program's reads in its own. A part that pins a look of its own
   (data-theme="light" or "dark", the theme samples) has the mapping read again there, against the
   site's tokens for that look.
   ============================================================================ */
.wel-canvas,
.wel-canvas [data-theme] {
    --color-bg: var(--bg);
    --color-frame: var(--land-band);
    --color-surface: var(--surface);
    --color-surface-alt: var(--surface-2);
    --color-stroke: var(--border-strong);
    --color-stroke-subtle: var(--border);
    --color-overlay-grid: color-mix(in srgb, var(--text) 7%, transparent);
    --color-text: var(--text);
    --color-text-secondary: var(--muted);
    --color-text-disabled: color-mix(in srgb, var(--muted) 55%, var(--surface));
    --color-text-on-accent: var(--accent-contrast);
    --color-accent: var(--accent);
    --color-accent-text: var(--accent);
    --color-on-accent: var(--accent-contrast);
    --color-accent-bg: color-mix(in srgb, var(--accent) 14%, transparent);
    --color-success: var(--success);
    --color-success-bg: color-mix(in srgb, var(--success) 18%, transparent);
    --color-caution: var(--warning);
    --color-caution-bg: color-mix(in srgb, var(--warning) 16%, transparent);
    --color-critical: var(--danger);
    --color-critical-bg: color-mix(in srgb, var(--danger) 18%, transparent);
    --color-neutral: var(--muted);
    --color-neutral-bg: color-mix(in srgb, var(--text) 6%, transparent);
    /* The tank is drawn in the program's equipment-symbol material, which the site has no token
       for: the program's own light values. */
    --color-symbol-outline: #34434d;
    --color-symbol-glass: #dceff5;
    --color-symbol-process: #2d8fb8;
    --shadow-card: var(--shadow-sm);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dark: the well stands between the page and a card, as the program's dark well does (the site's
   second surface is lighter than its cards there), and the tank takes the program's dark material. */
[data-theme="dark"] .wel-canvas,
.wel-canvas [data-theme="dark"] {
    --color-surface-alt: color-mix(in srgb, var(--bg) 55%, var(--surface));
    --color-symbol-outline: #d5dee3;
    --color-symbol-glass: #183a49;
    --color-symbol-process: #55b9de;
}

/* A part pinned to the light look inside a dark page: the site's light tokens (app.css, :root). */
.wel-canvas [data-theme="light"] {
    --bg: #f4f2ec;
    --surface: #fcfbf7;
    --surface-2: #ece9e0;
    --border: #e3dfd5;
    --border-strong: #d2ccbe;
    --text: #1e1b15;
    --muted: #6b6458;
    --land-band: #edeae2;
    --accent: #0369a1;
    --accent-contrast: #ffffff;
    --success: #17753a;
    --warning: #8a6400;
    --danger: #c92a2a;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --color-surface-alt: var(--surface-2);
}

/* ---- The drawing's canvas ---------------------------------------------------------------
   The program sizes the canvas to its stage; here it takes the width of the column it stands in
   and the height its parts need. The scene's layout answers to this box's width (the wel-scene
   container), not the window's. */
.wel-canvas {
    container: wel-scene / inline-size;
    padding: 1rem;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 12px;
    background:
        radial-gradient(circle, var(--color-overlay-grid) 1px, transparent 1.5px) 0 0 / 22px 22px,
        var(--color-surface-alt);
    overflow: hidden;
}

/* The drawing: a grid whose named areas each scene lays out below, at the site's type size. The
   sizes are in rem, not in shares of a parent, so no word of a part nested in another shrinks. */
.wel-art {
    display: grid;
    gap: 0.6rem 0.375rem;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--color-text);
}

/* Every part arrives in the order of the story. */
:where(.wel-art > *) {
    min-width: 0;
    animation: wel-rise 0.55s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-rise {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes wel-fade {
    from {
        opacity: 0;
    }
}

/* ---- The drawing's lines ----------------------------------------------------------------
   A line between two parts: dashes running along it the way the data flows, and its head where it
   arrives. A line marked to turn runs across on a wide box and down on a narrow one, where the
   parts it joins stand one under the other. */
.wel-pipe {
    --wel-ink: var(--color-accent);
    position: relative;
    align-self: center;
    min-width: 1.25rem;
    height: 2px;
}

.wel-pipe.caution {
    --wel-ink: var(--color-caution);
}

.wel-pipe::before {
    content: "";
    position: absolute;
    inset: 0 5px 0 0;
    background: linear-gradient(90deg, var(--wel-ink) 0 6px, transparent 6px) 0 0 / 10px 100% repeat-x;
    animation: wel-pipe-across 0.9s linear infinite;
}

.wel-pipe::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    border-block: 4.5px solid transparent;
    border-left: 7px solid var(--wel-ink);
    transform: translateY(-50%);
}

.wel-pipe.wel-down {
    justify-self: center;
    align-self: stretch;
    width: 2px;
    height: auto;
    min-width: 0;
    min-height: 1.25rem;
}

.wel-pipe.wel-down::before {
    inset: 0 0 5px;
    background: linear-gradient(180deg, var(--wel-ink) 0 6px, transparent 6px) 0 0 / 100% 10px repeat-y;
    animation-name: wel-pipe-down;
}

.wel-pipe.wel-down::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    border-block: 0;
    border-inline: 4.5px solid transparent;
    border-top: 7px solid var(--wel-ink);
    transform: translateX(-50%);
}

@keyframes wel-pipe-across {
    to {
        background-position: 10px 0;
    }
}

@keyframes wel-pipe-down {
    to {
        background-position: 0 10px;
    }
}

/* A line drawn in SVG, stretched over the part of the grid it crosses: its stroke and dashes keep
   their size however the box stretches it. */
.wel-wire {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.wel-flow {
    stroke-dasharray: 6 5;
    animation: wel-flow 1s linear infinite;
}

@keyframes wel-flow {
    to {
        stroke-dashoffset: -11;
    }
}

/* ---- The drawing's parts ---------------------------------------------------------------- */
.wel-node {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-stroke);
    border-radius: 0.6rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.wel-node-head,
.wel-node-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-weight: var(--font-weight-semibold);
    overflow-wrap: break-word;
}

/* A title and what it holds at the two ends of one line, the second going under the first where
   the language's words take the whole line. */
.wel-spread {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0.3rem;
}

/* A card title that wraps beside its mark rather than being cut at the card's edge, whatever the
   language's length. */
.wel-node-head.wel-head-wrap {
    align-items: flex-start;
}

.wel-head-wrap .wel-head-text {
    min-width: 0;
}

/* A glyph takes the ink of what holds it here: the base rule's secondary grey would sink into the
   accent of a filled mark, and the parts that want a colour of their own say so below. */
.wel-art .ui-glyph {
    color: inherit;
    font-size: 1.1em;
    line-height: 1;
}

/* The program sets a glyph in its icon font; the site draws the same glyph's outline
   (Components/Shared/ProgramGlyphs.cs) in the box the font gives it: 1em square, standing on the
   baseline, in the ink of the text. */
.wel-art svg.ui-glyph {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: visible;
}

.wel-art .wel-g {
    flex: 0 0 auto;
    font-size: 1.25em;
    color: var(--color-accent);
}

.wel-art .wel-g-sub {
    flex: 0 0 auto;
    font-size: 1.1em;
    color: var(--color-text-secondary);
}

/* A column's name over the drawing, uppercase and tracked like the trail's stretches. */
.wel-cap {
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.07em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* A caption standing on the grid sits on the part it names. */
.wel-art > .wel-cap {
    align-self: end;
}

.wel-sub {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wel-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.8125rem;
}

.wel-mono {
    font-family: var(--font-mono);
}

.wel-addr {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.wel-val {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wel-big {
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}

.wel-code {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.2rem 0.45rem;
    border-radius: 0.3rem;
    background: var(--color-surface-alt);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.wel-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wel-chip.current {
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-accent-text);
}

.wel-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-neutral);
}

.wel-dot.ok {
    background: var(--color-success);
}

.wel-dot.caution {
    background: var(--color-caution);
}

.wel-dot.critical {
    background: var(--color-critical);
}

.wel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-bg);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.wel-badge.ok {
    background: var(--color-success-bg);
    color: var(--color-text);
}

.wel-badge.ok .ui-glyph {
    color: var(--color-success);
}

.wel-badge.critical {
    background: var(--color-critical-bg);
    color: var(--color-text);
}

.wel-fake-btn {
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-stroke);
    border-radius: 0.4rem;
    background: var(--color-surface);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.wel-fake-btn.accent {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* Something present but not the point: drawn in the well's colour. */
.wel-node.wel-faint {
    background: transparent;
    box-shadow: none;
}

/* A value that just changed lights in the accent for a moment. */
.wel-live {
    animation: wel-blip 2.4s ease-in-out infinite;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-blip {
    0%, 78%, 100% {
        color: inherit;
    }

    86% {
        color: var(--color-accent-text);
    }
}

.wel-pulse {
    animation: wel-pulse 1.6s ease-in-out infinite;
}

@keyframes wel-pulse {
    50% {
        opacity: 0.35;
    }
}

.wel-blink {
    animation: wel-blink 1.1s steps(1) infinite;
}

@keyframes wel-blink {
    50% {
        opacity: 0.45;
    }
}

/* The station's screen in miniature, on a device's frame. */
.wel-device-frame {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.wel-mini {
    display: block;
    padding: 0.2rem;
    border: 0.2rem solid var(--color-text-secondary);
    border-radius: 0.45rem;
    background: var(--color-surface);
}

.wel-mini svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The monitor's stand and the laptop's base, under their screens. */
.wel-monitor::after,
.wel-laptop::after {
    content: "";
    align-self: center;
    flex: 0 0 auto;
    height: 0.3rem;
    border-radius: 0.2rem;
    background: var(--color-text-secondary);
}

.wel-monitor::after {
    width: 34%;
}

.wel-laptop::after {
    width: 104%;
    margin-top: -0.3rem;
}

/* The program's window bar: the brand's G and name (docs/brand/brand.md). */
.wel-brand-mark {
    flex: 0 0 auto;
    width: 1.3em;
    height: 1.3em;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Connector --------------------------------------------------------------------------
   One line of data: the PLC, its driver and its tag across, then down to the servers that hand the
   value on. */
.wel-scene-connector {
    grid-template-columns: auto minmax(1.25rem, 1fr) auto minmax(1.25rem, 1fr) auto;
    grid-template-areas:
        "plc to-driver driver to-tag tag"
        ". . . . to-servers"
        "servers servers servers servers servers";
}

.wel-node.wel-device {
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.8rem;
    text-align: center;
}

.wel-art .wel-device .wel-g {
    font-size: 1.6em;
}

/* A driver: the plug and its protocol, joined to its equipment on one side and its tag on the
   other. */
.wel-driver {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-accent);
    border-radius: 0.45rem;
    background: var(--color-accent-bg);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.wel-art .wel-driver .ui-glyph {
    color: var(--color-accent);
}

.wel-tag {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-stroke);
    border-radius: 0.5rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.wel-tag-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.wel-tag-reading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.wel-raw {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.wel-art .wel-tag-arrow {
    font-size: 0.9em;
    color: var(--color-accent);
}

.wel-tag-reading .wel-val {
    margin-left: auto;
    font-size: 1.0625rem;
}

.wel-server-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
}

/* ---- Logic ------------------------------------------------------------------------------
   Two values feed a variable, and an alarm watches the variable. */
.wel-scene-logic {
    grid-template-columns: auto minmax(1.25rem, 1fr) auto minmax(1.25rem, 1fr) auto;
    grid-template-areas:
        "t1 to-variable-1 variable to-alarm alarm"
        "t2 to-variable-2 variable to-alarm alarm";
}

.wel-node.wel-point {
    gap: 0.15rem;
    padding: 0.5rem 0.65rem;
}

.wel-node.wel-alarm {
    border-color: var(--color-critical);
}

.wel-alarm-name {
    font-size: 0.875rem;
}

.wel-art .wel-ring {
    color: var(--color-critical);
    animation: wel-ring 1.8s ease-in-out infinite;
    transform-origin: 50% 15%;
}

@keyframes wel-ring {
    0%, 60%, 100% {
        transform: rotate(0);
    }

    66% {
        transform: rotate(-14deg);
    }

    74% {
        transform: rotate(12deg);
    }

    82% {
        transform: rotate(-8deg);
    }
}

/* ---- Process ----------------------------------------------------------------------------
   The model, the units it runs on and the verdict, each under its column's name. */
.wel-scene-process {
    grid-template-columns: minmax(0, 8rem) 1.25rem minmax(8.5rem, 1fr) 1.25rem auto;
    grid-template-areas:
        "model-cap . units-cap . verdict-cap"
        "model to-units bench-1 to-verdict verdict"
        "model . bench-2 . verdict";
}

/* A column's name wraps to its column's width rather than widening it. */
.wel-scene-process > .wel-cap {
    contain: inline-size;
}

/* The procedure's steps light one after the other, as a run goes through them. */
.wel-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.wel-step {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    animation: wel-step 4.5s infinite;
}

.wel-step.s2 {
    animation-delay: 1.5s;
}

.wel-step.s3 {
    animation-delay: 3s;
}

@keyframes wel-step {
    0%, 32% {
        border-color: var(--color-accent);
        background: var(--color-accent);
        color: var(--color-on-accent);
    }

    34%, 100% {
        border-color: var(--color-stroke);
        background: transparent;
        color: var(--color-text-secondary);
    }
}

.wel-chart {
    display: block;
    width: 100%;
    height: 4.5rem;
}

.wel-chart-grid {
    fill: none;
    stroke: var(--color-stroke-subtle);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wel-chart-line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.wel-chart-line.faint {
    stroke: var(--color-text-disabled);
    stroke-width: 1.5;
}

/* A curve being recorded: it draws itself from the left. */
.wel-draw {
    animation: wel-draw 2.6s var(--ease-out) 0.7s both;
}

@keyframes wel-draw {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.wel-node.wel-verdict {
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.7rem;
    border-color: var(--color-success);
}

/* The mark goes over its word where the language's word leaves no room beside it. */
.wel-verdict-mark {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-success);
}

.wel-art .wel-verdict-mark .ui-glyph {
    font-size: 0.85em;
}

/* ---- View -------------------------------------------------------------------------------
   The palette beside the screen built from it. */
.wel-scene-view {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "palette screen";
    align-items: stretch;
}

.wel-node.wel-palette {
    gap: 0.15rem;
    padding: 0.45rem;
}

.wel-palette-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.wel-palette-item:first-child {
    background: var(--color-accent-bg);
}

.wel-node.wel-window {
    gap: 0;
    padding: 0;
}

.wel-window-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem 0.5rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.wel-window-grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
        "gauge tank"
        "gauge button"
        "trend trend";
    gap: 0.45rem;
    padding: 0.6rem;
    background: radial-gradient(circle, var(--color-overlay-grid) 1px, transparent 1.5px) 0 0 / 1.1rem 1.1rem;
}

.wel-at-gauge {
    grid-area: gauge;
}

.wel-at-tank {
    grid-area: tank;
}

.wel-at-button {
    grid-area: button;
}

.wel-at-trend {
    grid-area: trend;
}

.wel-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.45rem;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 0.45rem;
    background: var(--color-surface);
    text-align: center;
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-widget-value {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wel-gauge {
    width: 80%;
    max-width: 7rem;
    overflow: visible;
}

.wel-gauge-track,
.wel-gauge-value {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
}

.wel-gauge-track {
    stroke: var(--color-stroke-subtle);
}

.wel-gauge-value {
    stroke: var(--color-accent);
    stroke-dasharray: 72 100;
}

.wel-needle path {
    stroke: var(--color-text);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.wel-needle circle {
    fill: var(--color-text);
}

.wel-needle {
    transform: rotate(40deg);
    transform-origin: 50px 56px;
    animation: wel-sway 4s ease-in-out infinite;
}

@keyframes wel-sway {
    0%, 100% {
        transform: rotate(36deg);
    }

    50% {
        transform: rotate(44deg);
    }
}

.wel-tank {
    position: relative;
    width: 2.6rem;
    height: 3.6rem;
    border: 0.14rem solid var(--color-symbol-outline);
    border-radius: 0.6rem 0.6rem 0.35rem 0.35rem;
    background: var(--color-symbol-glass);
    overflow: hidden;
}

.wel-tank-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 68%;
    background: var(--color-symbol-process);
    animation: wel-level 6s ease-in-out infinite;
}

@keyframes wel-level {
    0%, 100% {
        height: 62%;
    }

    50% {
        height: 72%;
    }
}

.wel-trend {
    display: block;
    width: 100%;
    height: 3.5rem;
}

.wel-widget.wel-btn-box {
    border: none;
    background: transparent;
}

.wel-btn-box .wel-fake-btn {
    align-self: center;
}

/* ---- The assistant ----------------------------------------------------------------------
   Two windows, the reader's own AI assistant and the program, so the conversation is seen to
   happen outside the program, joined by the MCP line. */
.wel-scene-agent {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 10.5rem);
    grid-template-areas: "assistant mcp station";
}

.wel-node.wel-app {
    gap: 0;
    padding: 0;
}

.wel-app-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-stroke-subtle);
}

.wel-app-title {
    min-width: 0;
    font-weight: var(--font-weight-semibold);
}

/* The reader's assistant wears no product's look: only its title and, smaller, the assistants that
   fit it. */
.wel-assistant-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.wel-assistant-names {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* The conversation, the way a chat stacks its messages. */
.wel-conversation {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem;
}

.wel-bubble {
    max-width: 90%;
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 0.9rem;
    font-size: 0.875rem;
    line-height: 1.4;
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

/* What the operator asks: on the right, in the accent tint. */
.wel-bubble-ask {
    align-self: flex-end;
    border-bottom-right-radius: 0.25rem;
    background: var(--color-accent-bg);
}

/* What the assistant answers: on the left, on the well inside the window's surface. */
.wel-bubble-reply {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--color-stroke);
    border-bottom-left-radius: 0.25rem;
    background: var(--color-surface-alt);
}

.wel-reply-mark {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: var(--color-success);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* MCP, the line between the two windows: its name over it, and a pulse that runs to the program
   with the request and is back as the reply arrives (the scene times it, --wel-delay and
   --wel-trip, from the balloons'). */
.wel-mcp {
    position: relative;
    align-self: center;
    min-width: 3.25rem;
    height: 2px;
    background: var(--color-accent);
}

.wel-mcp .wel-chip {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%);
}

.wel-mcp-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0.25rem var(--color-accent-bg);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: wel-mcp-trip var(--wel-trip, 700ms) ease-in-out both;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-mcp-trip {
    0% {
        left: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    50% {
        left: 100%;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 0;
        opacity: 0;
    }
}

@keyframes wel-mcp-trip-down {
    0% {
        top: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    50% {
        top: 100%;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: 0;
        opacity: 0;
    }
}

/* The program's window: the brand's G and name on its bar, agent access in its body and every
   change recorded at its foot. */
.wel-wordmark {
    letter-spacing: -0.01em; /* the brand's slight negative tracking */
}

.wel-app-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
}

.wel-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-stroke-subtle);
    font-size: 0.8125rem;
}

/* The foot may take two lines rather than lose its end. */
.wel-line.wel-app-foot {
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--color-stroke-subtle);
    font-size: 0.75rem;
}

/* The app's own switch, small. */
.wel-switch {
    position: relative;
    flex: 0 0 auto;
    width: 2.3em;
    height: 1.3em;
    border-radius: var(--radius-pill);
    background: var(--color-stroke);
}

.wel-switch > span {
    position: absolute;
    top: 0.18em;
    left: 0.18em;
    width: 0.94em;
    height: 0.94em;
    border-radius: 50%;
    background: var(--color-surface);
}

.wel-switch.on {
    background: var(--color-accent);
}

.wel-switch.on > span {
    left: 1.18em;
}

/* ---- Events -----------------------------------------------------------------------------
   The alarms timeline under its tabs, newest first. */
.wel-scene-events {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "timeline";
}

.wel-node.wel-timeline {
    gap: 0;
}

.wel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--color-stroke-subtle);
    font-size: 0.8125rem;
}

.wel-tab {
    padding: 0.1rem 0 0.45rem;
    color: var(--color-text-secondary);
}

.wel-tab.current {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 -2px 0 var(--color-accent);
}

.wel-entry {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "time dot name state";
    align-items: center;
    gap: 0.15rem 0.6rem;
    padding: 0.5rem 0.2rem;
    border-bottom: 1px solid var(--color-stroke-subtle);
    font-size: 0.8125rem;
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-entry:last-child {
    border-bottom: none;
}

.wel-entry-time {
    grid-area: time;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.wel-entry > .wel-dot {
    grid-area: dot;
}

.wel-entry-name {
    grid-area: name;
    font-weight: var(--font-weight-medium);
}

.wel-entry-state {
    grid-area: state;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-align: right;
}

/* ---- Validation -------------------------------------------------------------------------
   The setup read area by area on its own, and what cannot work on the list beside it. */
.wel-scene-validation {
    grid-template-columns: auto minmax(1.25rem, 2rem) minmax(0, 1fr);
    grid-template-areas: "areas to-findings findings";
}

/* A light passes down the areas as the program reads them. */
.wel-areas {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow: hidden;
}

.wel-areas::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 30%;
    background: linear-gradient(to bottom, transparent, var(--color-accent-bg), transparent);
    pointer-events: none;
    animation: wel-scan 3.4s ease-in-out infinite;
}

@keyframes wel-scan {
    to {
        top: 100%;
    }
}

.wel-node.wel-area {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
}

.wel-art .wel-ok-mark {
    flex: 0 0 auto;
    font-size: 1.2em;
    color: var(--color-success);
}

.wel-art .wel-warn-mark {
    flex: 0 0 auto;
    font-size: 1.2em;
    color: var(--color-caution);
}

.wel-node.wel-findings {
    gap: 0.5rem;
}

.wel-finding {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-caution);
    border-radius: 0.45rem;
    background: var(--color-caution-bg);
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-finding-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    font-size: 0.8125rem;
}

.wel-finding.wel-finding-ok {
    grid-template-columns: auto minmax(0, 1fr);
    border-style: dashed;
    border-color: var(--color-stroke);
    background: transparent;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.wel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-text);
    white-space: nowrap;
}

/* ---- Users ------------------------------------------------------------------------------
   The roles as switches per area, beside one person signing in on the station. */
.wel-scene-users {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    grid-template-areas: "roles signin";
    align-items: stretch;
}

.wel-node.wel-matrix {
    gap: 0;
}

.wel-matrix-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 3.6rem);
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-stroke-subtle);
    font-size: 0.8125rem;
    animation: wel-rise 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-matrix-row.wel-matrix-head {
    padding: 0.35rem 0;
    border-top: none;
}

.wel-matrix-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.wel-art .wel-matrix-area .ui-glyph {
    font-size: 1.5em;
    color: var(--color-accent);
}

.wel-matrix-role {
    font-weight: var(--font-weight-semibold);
    overflow-wrap: break-word;
}

.wel-matrix-cell {
    display: flex;
    justify-content: center;
}

.wel-node.wel-signin {
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
}

.wel-avatar {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--color-accent-bg);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-text);
}

.wel-signin .wel-badge {
    align-self: center;
}

.wel-pin {
    display: flex;
    gap: 0.55rem;
    margin: 0.15rem 0;
}

/* The PIN's digits fill one by one, hold, and the next sign-in begins. */
.wel-pin-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 0.12rem solid var(--color-text-secondary);
    border-radius: 50%;
    animation: wel-pin-1 6s infinite;
}

.wel-pin-dot:nth-child(2) {
    animation-name: wel-pin-2;
}

.wel-pin-dot:nth-child(3) {
    animation-name: wel-pin-3;
}

.wel-pin-dot:nth-child(4) {
    animation-name: wel-pin-4;
}

@keyframes wel-pin-1 {
    0%, 14%, 92%, 100% { background: transparent; }
    15%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

@keyframes wel-pin-2 {
    0%, 24%, 92%, 100% { background: transparent; }
    25%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

@keyframes wel-pin-3 {
    0%, 34%, 92%, 100% { background: transparent; }
    35%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

@keyframes wel-pin-4 {
    0%, 44%, 92%, 100% { background: transparent; }
    45%, 91% { background: var(--color-text); border-color: var(--color-text); }
}

.wel-line.wel-kept {
    align-items: flex-start;
    justify-content: center;
}

/* ---- Remote access ----------------------------------------------------------------------
   The station, the network, and the devices that open it. */
.wel-scene-remote {
    grid-template-columns: minmax(0, 1fr) minmax(3.25rem, 0.45fr) minmax(0, 1.05fr);
    grid-template-areas:
        "station-cap . ."
        "station network devices";
}

.wel-art .wel-fan {
    align-self: stretch;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.wel-art .wel-fan-down {
    display: none;
}

.wel-art > .wel-hub-dot {
    place-self: center;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 0.12rem solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent);
    box-shadow: 0 0 0 0.4rem var(--color-accent-bg);
}

.wel-art .wel-hub-dot .ui-glyph {
    font-size: 1.4em;
}

.wel-devices {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.wel-tablet .wel-mini {
    border-width: 0.3rem;
    border-radius: 0.7rem;
}

.wel-mini-card {
    fill: var(--color-surface-alt);
}

.wel-mini-gauge,
.wel-mini-gauge-value {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.wel-mini-gauge {
    stroke: var(--color-stroke);
}

.wel-mini-gauge-value {
    stroke: var(--color-accent);
}

.wel-mini-bar {
    fill: var(--color-accent);
}

.wel-mini-led {
    fill: var(--color-success);
}

.wel-mini-trend {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
}

/* The office computer's chart: its grid, and a second line in another ink than the first. */
.wel-mini-trend.wel-mini-trend-second {
    stroke: var(--color-success);
}

.wel-mini-grid {
    fill: none;
    stroke: var(--color-stroke);
    stroke-width: 0.5;
}

/* The tablet's recipe: a step's words, the step under way outlined, the steps to come hollow. */
.wel-mini-line {
    fill: var(--color-stroke);
}

.wel-mini-card.wel-mini-current {
    stroke: var(--color-accent);
    stroke-width: 0.8;
}

.wel-mini-ring,
.wel-mini-pending {
    fill: none;
    stroke-width: 1.4;
}

.wel-mini-ring {
    stroke: var(--color-accent);
}

.wel-mini-pending {
    stroke: var(--color-stroke);
}

/* A device's name under its screen, and under the laptop's base. */
.wel-device-label {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ---- Settings ---------------------------------------------------------------------------
   The languages over the looks and the snapshots. */
.wel-scene-settings {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "language language"
        "look backups";
    align-items: stretch;
}

.wel-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.wel-langs .wel-chip {
    animation: wel-rise 0.4s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-themes {
    display: flex;
    gap: 0.5rem;
}

.wel-theme {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* A window in a look, drawn by the tokens that look pins on it. */
.wel-theme-window {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    height: 4.25rem;
    padding: 0.3rem;
    border: 1px solid var(--color-stroke);
    border-radius: 0.4rem;
    background: var(--color-bg);
}

.wel-theme-bar {
    flex: 0 0 auto;
    height: 0.5rem;
    border-radius: 0.2rem;
    background: var(--color-frame);
}

.wel-theme-card {
    flex: 1 1 0;
    border: 1px solid var(--color-stroke-subtle);
    border-radius: 0.2rem;
    background: var(--color-surface);
}

.wel-theme-card.short {
    flex-grow: 0.6;
}

.wel-snapshots {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.2rem;
}

.wel-snapshots::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    top: 50%;
    height: 0.12rem;
    background: var(--color-stroke);
}

.wel-snap {
    position: relative;
    width: 0.8rem;
    height: 0.8rem;
    border: 0.14rem solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-surface);
}

.wel-snap.current {
    background: var(--color-accent);
}

.wel-line.wel-update {
    align-items: flex-start;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.wel-art .wel-update .ui-glyph {
    color: var(--color-accent);
}

/* ---- Account ----------------------------------------------------------------------------
   The account licensing the station, over the license that holds without internet. */
.wel-scene-account {
    grid-template-columns: minmax(0, 1fr) minmax(1.25rem, 2.5rem) auto;
    grid-template-areas:
        "account to-station station"
        "offline offline offline";
}

.wel-art .wel-license .wel-brand-mark {
    width: 1.4em;
    height: 1.4em;
}

.wel-licensed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.wel-licensed .wel-monitor {
    width: 7rem;
}

.wel-licensed .wel-badge {
    align-self: center;
}

.wel-mini.wel-mini-check {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
}

.wel-art .wel-mini-check .ui-glyph {
    font-size: 2.2em;
    color: var(--color-success);
}

.wel-offline-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.1rem;
}

.wel-offline-kind {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.3rem;
    min-width: 0;
}

.wel-days {
    display: flex;
    gap: 0.15rem;
}

.wel-day {
    flex: 1 1 0;
    height: 1.2rem;
    border-radius: 0.15rem;
    background: var(--color-accent);
    animation: wel-rise 0.4s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-days-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

/* The perpetual license: one unbroken bar, with the sign that it has no end. */
.wel-forever {
    height: 1.2rem;
    border-radius: 0.15rem;
    background: var(--color-accent);
    transform-origin: left center;
    animation: wel-grow 0.9s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

.wel-forever-mark {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    color: var(--color-accent);
    animation: wel-fade 0.5s var(--ease-out) both;
    animation-delay: var(--wel-delay, 0ms);
}

@keyframes wel-grow {
    from {
        transform: scaleX(0);
    }
}

/* ---- A box as narrow as a phone's ---------------------------------------------------------
   The same parts, one under the other, at the box's width: the lines that turn run down, and no
   part is narrowed below what its words need. */
@container wel-scene (max-width: 25rem) {
    .wel-pipe.wel-turn {
        justify-self: center;
        align-self: stretch;
        width: 2px;
        height: auto;
        min-width: 0;
        min-height: 1.25rem;
    }

    .wel-pipe.wel-turn::before {
        inset: 0 0 5px;
        background: linear-gradient(180deg, var(--wel-ink) 0 6px, transparent 6px) 0 0 / 100% 10px repeat-y;
        animation-name: wel-pipe-down;
    }

    .wel-pipe.wel-turn::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        border-block: 0;
        border-inline: 4.5px solid transparent;
        border-top: 7px solid var(--wel-ink);
        transform: translateX(-50%);
    }

    .wel-scene-connector {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "plc" "to-driver" "driver" "to-tag" "tag" "to-servers" "servers";
        justify-items: center;
    }

    .wel-scene-connector > .wel-tag,
    .wel-scene-connector > .wel-servers {
        justify-self: stretch;
    }

    .wel-scene-logic {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "t1 t2"
            "to-variable-1 to-variable-2"
            "variable variable"
            "to-alarm to-alarm"
            "alarm alarm";
    }

    .wel-scene-process {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "model-cap" "model" "to-units" "units-cap" "bench-1" "bench-2" "to-verdict" "verdict-cap" "verdict";
    }

    .wel-scene-view {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "palette" "screen";
    }

    .wel-node.wel-palette {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wel-scene-agent {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "assistant" "mcp" "station";
    }

    .wel-mcp {
        justify-self: center;
        width: 2px;
        min-width: 0;
        height: 2.75rem;
    }

    .wel-mcp .wel-chip {
        top: 50%;
        bottom: auto;
        left: calc(100% + 0.6rem);
        transform: translateY(-50%);
    }

    .wel-mcp-pulse {
        left: 50%;
        animation-name: wel-mcp-trip-down;
    }

    .wel-entry {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-areas:
            "time dot name"
            ". . state";
    }

    .wel-entry-state {
        text-align: left;
    }

    .wel-scene-validation {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "areas" "to-findings" "findings";
    }

    .wel-scene-users {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "roles" "signin";
    }

    .wel-scene-remote {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "station-cap" "station" "network" "devices";
    }

    .wel-scene-remote > .wel-monitor {
        justify-self: center;
        width: 70%;
    }

    .wel-art .wel-fan-across {
        display: none;
    }

    .wel-art .wel-fan-down {
        display: block;
        height: 4.5rem;
    }

    .wel-devices {
        flex-direction: row;
        gap: 0.75rem;
    }

    .wel-devices > .wel-device-frame {
        flex: 1 1 0;
    }

    .wel-scene-settings {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "language" "look" "backups";
    }

    .wel-scene-account {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "account" "to-station" "station" "offline";
    }

    .wel-offline-kinds {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Reduced motion ---------------------------------------------------------------------
   A reader who asks for less motion sees each scene still, as it stands once every part has
   arrived: the entrances, the flows, the lights and the loops stop, and what only exists in motion
   (the pulse on the MCP line, the reading light of Validation) is not drawn. The program's Welcome
   page has no such rule; this one is the site's. */
@media (prefers-reduced-motion: reduce) {
    .wel-art *,
    .wel-art *::before,
    .wel-art *::after {
        animation: none !important;
    }

    .wel-mcp-pulse,
    .wel-areas::after {
        display: none;
    }
}