/* /Components/CaseLevelPicker.razor.rz.scp.css */
.case-level-picker[b-tfhfbenavi] {
    position: relative;
    z-index: 1;
    width: min(440px, calc(100vw - 40px));
    min-width: 300px;
}

.case-level-picker.is-open[b-tfhfbenavi] {
    z-index: 10000;
}

.case-level-picker__trigger[b-tfhfbenavi] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 6px 9px;
    border: 1px solid #37373b;
    border-radius: 13px;
    background: #171719;
    color: #f2f2f4;
    font: inherit;
    text-align: left;
    opacity: 1;
    cursor: pointer;
    transition: background .16s, border-color .16s;
}

.case-level-picker__trigger:hover[b-tfhfbenavi],
.case-level-picker__trigger[aria-expanded="true"][b-tfhfbenavi] {
    border-color: #73503c;
    background: #1d1d20;
}

.case-level-picker__trigger:focus-visible[b-tfhfbenavi],
.case-level-picker__close:focus-visible[b-tfhfbenavi],
.case-level-picker__list:focus-visible[b-tfhfbenavi] {
    outline: 2px solid #f36f29;
    outline-offset: 2px;
}

.case-level-picker__trigger-icon[b-tfhfbenavi],
.case-level-picker__menu-mark[b-tfhfbenavi] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #f36f2940;
    border-radius: 12px;
    background: #f36f2915;
    color: #ff9a63;
}

.case-level-picker__trigger-icon svg[b-tfhfbenavi],
.case-level-picker__menu-mark svg[b-tfhfbenavi],
.case-level-picker__trigger-action svg[b-tfhfbenavi] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.case-level-picker__trigger-copy[b-tfhfbenavi] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.case-level-picker__trigger-caption[b-tfhfbenavi] {
    color: #89858e;
    font: 750 8px/1 ui-monospace, monospace;
    letter-spacing: .1em;
}

.case-level-picker__current[b-tfhfbenavi] {
    display: block;
    overflow: hidden;
    color: #f2f2f4;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-level-picker__trigger-action[b-tfhfbenavi] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 9px;
    border: 1px solid #ffffff12;
    border-radius: 9px;
    background: #242326;
    color: #aaa6af;
    font: 750 8px/1 ui-monospace, monospace;
    letter-spacing: .06em;
    white-space: nowrap;
}

.case-level-picker__trigger-action svg[b-tfhfbenavi] {
    width: 15px;
    height: 15px;
    color: #ff9a63;
}

.case-level-picker__overlay[b-tfhfbenavi] {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: stretch;
    padding: 16px;
    background: rgb(0 0 0 / 72%);
    animation: case-menu-fade-in-b-tfhfbenavi .15s ease-out both;
}

.case-level-picker__menu[b-tfhfbenavi] {
    display: flex;
    flex-direction: column;
    width: min(370px, calc(100vw - 32px));
    min-height: 0;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    padding: 11px;
    border: 1px solid #ffffff1c;
    border-radius: 22px;
    background: #1c1b19;
    box-shadow: 0 18px 48px rgb(0 0 0 / 58%);
    animation: case-menu-slide-in-b-tfhfbenavi .18s cubic-bezier(.2, .75, .25, 1) both;
}

.case-level-picker__menu-header[b-tfhfbenavi] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 7px 14px;
    border-bottom: 1px solid #ffffff12;
}

.case-level-picker__menu-brand[b-tfhfbenavi] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.case-level-picker__menu-mark[b-tfhfbenavi] {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #3b3029;
}

.case-level-picker__menu-heading[b-tfhfbenavi] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.case-level-picker__menu-heading > span[b-tfhfbenavi] {
    overflow: hidden;
    color: #aaa69f;
    font: 750 8px/1 ui-monospace, monospace;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-level-picker__menu-heading > strong[b-tfhfbenavi] {
    color: #f2f0ec;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.1;
}

.case-level-picker__close[b-tfhfbenavi] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ffffff16;
    border-radius: 11px;
    background: #ffffff08;
    color: #aaa69f;
    font: 300 23px/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
}

.case-level-picker__close:hover[b-tfhfbenavi] {
    border-color: #ffffff2a;
    background: #ffffff10;
    color: #fff;
}

.case-level-picker__menu-progress[b-tfhfbenavi] {
    display: grid;
    gap: 9px;
    flex: 0 0 auto;
    padding: 15px 9px 13px;
    border-bottom: 1px solid #ffffff12;
}

.case-level-picker__menu-progress > div[b-tfhfbenavi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #aaa69f;
    font-size: 11px;
}

.case-level-picker__menu-progress b[b-tfhfbenavi] {
    color: #f0eee9;
    font: 700 11px/1 ui-monospace, monospace;
}

.case-level-picker__menu-progress small[b-tfhfbenavi] {
    color: #88847e;
    font-size: 10px;
}

.case-level-picker__progress-track[b-tfhfbenavi] {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #34322f;
}

.case-level-picker__progress-track i[b-tfhfbenavi] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #f36f29;
    transition: width .2s ease;
}

.case-level-picker__list[b-tfhfbenavi] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 9px 3px 4px;
    scrollbar-color: #5c5852 #1c1b19;
    scrollbar-width: thin;
}

.case-level-picker__group + .case-level-picker__group[b-tfhfbenavi] {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #ffffff12;
}

.case-level-picker__group-title[b-tfhfbenavi] {
    padding: 8px 11px 6px;
    color: #8f8b84;
    font: 750 9px/1.3 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.case-level-picker__option[b-tfhfbenavi] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 9px;
    min-height: 44px;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: #cbc8c1;
    cursor: pointer;
    user-select: none;
    transition: background .14s, color .14s;
}

.case-level-picker__option:hover[b-tfhfbenavi],
.case-level-picker__option.is-active[b-tfhfbenavi] {
    background: #ffffff10;
    color: #fff;
}

.case-level-picker__option.is-selected[b-tfhfbenavi] {
    background: #473328;
    color: #ff9a63;
}

.case-level-picker__option.is-disabled[b-tfhfbenavi] {
    color: #77746f;
    cursor: not-allowed;
}

.case-level-picker__status[b-tfhfbenavi] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #77736c;
    border-radius: 50%;
    color: #aaa69f;
    font-size: 12px;
    line-height: 1;
}

.case-level-picker__option.is-completed .case-level-picker__status[b-tfhfbenavi] {
    border-color: #f36f2990;
    background: #f36f2915;
    color: #ff9a63;
}

.case-level-picker__option.is-disabled .case-level-picker__status[b-tfhfbenavi] {
    border-color: #55524e;
    color: #6d6962;
}

.case-level-picker__option-title[b-tfhfbenavi] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    line-height: 1.35;
}

.case-level-picker__option-number[b-tfhfbenavi] {
    flex: 0 0 auto;
    color: #a8a49d;
    font: 700 10px/1.2 ui-monospace, monospace;
}

.case-level-picker__option-name[b-tfhfbenavi] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.case-level-picker__badge[b-tfhfbenavi] {
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 1px solid #ffffff14;
    border-radius: 7px;
    color: #aaa69f;
    font: 750 8px/1 ui-monospace, monospace;
    letter-spacing: .05em;
    white-space: nowrap;
}

.case-level-picker__badge.is-current[b-tfhfbenavi] {
    border-color: #ff9a6338;
    background: #ff9a6312;
    color: #ff9a63;
}

.case-level-picker__badge.is-locked[b-tfhfbenavi] {
    color: #89857e;
}

.case-level-picker__badge.is-reading[b-tfhfbenavi] {
    border-color: #6c563c;
    background: #5a40281a;
    color: #e8b685;
}

.case-level-picker__badge.is-factory[b-tfhfbenavi] {
    border-color: #456b5c;
    background: #18372c;
    color: #8bd1ad;
}

@keyframes case-menu-fade-in-b-tfhfbenavi {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes case-menu-slide-in-b-tfhfbenavi {
    from { opacity: .7; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 760px) {
    .case-level-picker[b-tfhfbenavi] {
        width: 100%;
        min-width: 0;
    }

    .case-level-picker__trigger[b-tfhfbenavi] {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        min-height: 52px;
    }

    .case-level-picker__trigger-action[b-tfhfbenavi] {
        padding: 7px;
        font-size: 7px;
    }

    .case-level-picker__overlay[b-tfhfbenavi] {
        padding: 10px;
    }

    .case-level-picker__menu[b-tfhfbenavi] {
        width: min(370px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
        padding: 9px;
        border-radius: 20px;
    }

    .case-level-picker__option[b-tfhfbenavi] {
        column-gap: 7px;
        padding-inline: 8px;
    }

    .case-level-picker__option-title[b-tfhfbenavi] {
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-level-picker__overlay[b-tfhfbenavi],
    .case-level-picker__menu[b-tfhfbenavi] {
        animation: none;
    }
}

@media (max-width: 760px) {
    .case-level-picker__option[b-tfhfbenavi] { min-height: 48px; }
}

@media (prefers-color-scheme: light) {
/* The level picker follows the same system palette as the student app. */
html .case-level-picker__trigger[b-tfhfbenavi] {
    border-color: var(--line-strong);
    background: var(--panel);
    color: var(--text);
}

html .case-level-picker__trigger:hover[b-tfhfbenavi],
html .case-level-picker__trigger[aria-expanded="true"][b-tfhfbenavi] {
    border-color: color-mix(in srgb, var(--brand), var(--line-strong) 60%);
    background: var(--panel-2);
}

html .case-level-picker__trigger-icon[b-tfhfbenavi],
html .case-level-picker__menu-mark[b-tfhfbenavi] {
    border-color: color-mix(in srgb, var(--brand), transparent 70%);
    background: color-mix(in srgb, var(--brand) 10%, var(--panel));
    color: var(--brand);
}

html .case-level-picker__trigger-caption[b-tfhfbenavi],
html .case-level-picker__menu-progress > div[b-tfhfbenavi],
html .case-level-picker__menu-progress small[b-tfhfbenavi],
html .case-level-picker__group-title[b-tfhfbenavi],
html .case-level-picker__option-number[b-tfhfbenavi],
html .case-level-picker__badge[b-tfhfbenavi],
html .case-level-picker__status[b-tfhfbenavi] {
    color: var(--muted);
}

html .case-level-picker__current[b-tfhfbenavi],
html .case-level-picker__menu-heading > strong[b-tfhfbenavi],
html .case-level-picker__menu-progress b[b-tfhfbenavi] {
    color: var(--text);
}

html .case-level-picker__trigger-action[b-tfhfbenavi],
html .case-level-picker__close[b-tfhfbenavi],
html .case-level-picker__option.is-active[b-tfhfbenavi] {
    border-color: var(--line);
    background: var(--panel-2);
    color: var(--muted);
}

html .case-level-picker__trigger-action svg[b-tfhfbenavi] { color: var(--brand); }

html .case-level-picker__menu[b-tfhfbenavi] {
    border-color: var(--line-strong);
    background: var(--panel);
    box-shadow: 0 18px 48px rgb(31 41 55 / 22%);
}

html .case-level-picker__menu-header[b-tfhfbenavi],
html .case-level-picker__menu-progress[b-tfhfbenavi],
html .case-level-picker__group + .case-level-picker__group[b-tfhfbenavi] {
    border-color: var(--line);
}

html .case-level-picker__menu-mark[b-tfhfbenavi] { background: var(--panel-2); }
html .case-level-picker__close:hover[b-tfhfbenavi] { border-color: var(--line-strong); background: var(--panel-3); color: var(--text); }
html .case-level-picker__progress-track[b-tfhfbenavi] { background: var(--panel-3); }
html .case-level-picker__list[b-tfhfbenavi] { scrollbar-color: #aeb6c0 var(--panel); }

html .case-level-picker__option[b-tfhfbenavi] { color: var(--text); }
html .case-level-picker__option:hover[b-tfhfbenavi],
html .case-level-picker__option.is-active[b-tfhfbenavi] { background: var(--panel-2); color: var(--text); }
html .case-level-picker__option.is-selected[b-tfhfbenavi] { background: color-mix(in srgb, var(--brand) 12%, var(--panel)); color: #bd4e16; }
html .case-level-picker__option.is-disabled[b-tfhfbenavi] { color: var(--dim); }
html .case-level-picker__option.is-disabled .case-level-picker__status[b-tfhfbenavi] { border-color: var(--line-strong); color: var(--dim); }
html .case-level-picker__badge[b-tfhfbenavi] { border-color: var(--line); }
html .case-level-picker__badge.is-current[b-tfhfbenavi] { border-color: color-mix(in srgb, var(--brand), transparent 70%); background: color-mix(in srgb, var(--brand) 9%, var(--panel)); color: #bd4e16; }
html .case-level-picker__badge.is-locked[b-tfhfbenavi] { color: var(--dim); }
html .case-level-picker__badge.is-reading[b-tfhfbenavi] { border-color: #dfc6a9; background: #fff7ed; color: #8b541e; }
html .case-level-picker__badge.is-factory[b-tfhfbenavi] { border-color: #c0d9c9; background: #edf8f0; color: #2a7652; }

}
/* /Components/FactoryBuildingVisual.razor.rz.scp.css */
.factory-building-visual[b-ar4p57p5js] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 2px 2px #050907a8);
    shape-rendering: geometricPrecision;
}

.conveyor-bed[b-ar4p57p5js] { fill: #18221f; stroke: #596963; stroke-width: 2; }
.machine-rim[b-ar4p57p5js] { fill: none; stroke: #70837b; stroke-width: 1.4; }
.belt-channel[b-ar4p57p5js] { fill: #101715; stroke: #71817c; stroke-width: 2.6; }
.belt-rollers[b-ar4p57p5js] { fill: none; stroke: #a2b4ae; stroke-width: 1.4; opacity: .7; }
.belt-arrow[b-ar4p57p5js] { fill: none; stroke: #d4e1da; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }

.port-shadow[b-ar4p57p5js] { fill: none; stroke: #111a17; stroke-width: 11; stroke-linecap: square; }
.port-link[b-ar4p57p5js] { fill: none; stroke: #596a64; stroke-width: 6; stroke-linecap: square; }
.port-link.is-connected[b-ar4p57p5js] { stroke: #9bc4b0; filter: drop-shadow(0 0 3px #91e0b36b); }
.kind-conveyor .port-link[b-ar4p57p5js] { stroke: #76928a; }
.kind-conveyor .port-link.is-connected[b-ar4p57p5js] { stroke: #caf3dc; }
.kind-splitter .port-link.is-connected[b-ar4p57p5js], .kind-merger .port-link.is-connected[b-ar4p57p5js] { stroke: #bbd999; }

.junction-track[b-ar4p57p5js], .splitter-track[b-ar4p57p5js] { fill: none; stroke: #17211e; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.junction-track:not(.branch-track)[b-ar4p57p5js] { stroke: #3e514b; stroke-width: 8; }
.junction-track.branch-track[b-ar4p57p5js] { stroke: #455c53; stroke-width: 8; }
.junction-highlight[b-ar4p57p5js], .splitter-highlight[b-ar4p57p5js] { fill: none; stroke: #a8bdb4; stroke-width: 2; stroke-linecap: round; opacity: .64; }
.junction-highlight.branch-highlight[b-ar4p57p5js] { opacity: .48; }
.junction-hub[b-ar4p57p5js] { fill: var(--factory-steel-fill, #40504b); stroke: #91a39a; stroke-width: 1.8; }
.junction-core[b-ar4p57p5js] { fill: #273731; stroke: #b1c3b9; stroke-width: 1.5; }
.junction-arrow[b-ar4p57p5js], .splitter-arrow[b-ar4p57p5js] { fill: none; stroke: #eff8ee; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.splitter-track[b-ar4p57p5js] { stroke: #111a17; stroke-width: 12; }
.splitter-highlight[b-ar4p57p5js] { stroke: #a8c7b7; stroke-width: 2.5; }
.splitter-housing[b-ar4p57p5js] { fill: var(--factory-steel-fill, #40504b); stroke: #c0d2c7; stroke-width: 1.5; }
.splitter-core[b-ar4p57p5js] { fill: #21312b; stroke: #d2e4d8; stroke-width: 1.3; }

.machine-shell[b-ar4p57p5js] { fill: var(--factory-steel-fill, #40504b); stroke: #a3b7ad; stroke-width: 1.6; }
.machine-panel[b-ar4p57p5js] { fill: #27342f; stroke: #71847c; stroke-width: 1.2; }
.machine-seam[b-ar4p57p5js] { stroke: #a8b7af; stroke-width: 1.2; opacity: .56; }
.machine-skirt[b-ar4p57p5js] { fill: #1b2623; stroke: #72837b; stroke-width: 1; }
.machine-foot[b-ar4p57p5js] { fill: #111a17; stroke: #71847c; stroke-width: 1; }
.machine-steel[b-ar4p57p5js], .machine-pipe[b-ar4p57p5js] { fill: none; stroke: #b0c0b7; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: round; }
.machine-pipe[b-ar4p57p5js] { stroke: #86b2a6; }
.bolt[b-ar4p57p5js] { fill: #d7dfd9; stroke: #1d2824; stroke-width: .6; }
.output-marker[b-ar4p57p5js] { fill: #dcf0df; stroke: #2c4038; stroke-width: 1; }
.status-light[b-ar4p57p5js] { fill: #9dd9a4; stroke: #223a2b; stroke-width: 1; }

.gear-ring[b-ar4p57p5js] { fill: #b89d63; stroke: #e4d091; stroke-width: 2.5; stroke-dasharray: 3 2; }
.gear-core[b-ar4p57p5js] { fill: #23312b; stroke: #f3d892; stroke-width: 1.5; }
.gear-teeth[b-ar4p57p5js] { stroke: #edd89f; stroke-width: 2.2; stroke-linecap: round; }
.drill-tip[b-ar4p57p5js] { fill: #c5d0c7; stroke: #52655b; stroke-width: 1.3; }
.crusher-chamber[b-ar4p57p5js] { fill: #18211f; stroke: #8b9d94; stroke-width: 1.5; }
.crusher-roller[b-ar4p57p5js] { fill: #6d8178; stroke: #c2d0c8; stroke-width: 1.6; }
.roller-teeth[b-ar4p57p5js] { fill: none; stroke: #e1c17f; stroke-width: 1.5; stroke-linecap: round; }
.furnace-cap[b-ar4p57p5js] { fill: #4c3930; stroke: #d69761; stroke-width: 1.2; }
.furnace-window[b-ar4p57p5js] { fill: #1d2420; stroke: #f4a665; stroke-width: 1.8; }
.furnace-flame[b-ar4p57p5js] { fill: var(--factory-heat-fill, #ff944e); stroke: #ffd79a; stroke-width: .8; transform-origin: 32px 33px; }
.reactor-tank[b-ar4p57p5js] { fill: #30423d; stroke: #c5d4ca; stroke-width: 1.4; }
.reactor-liquid[b-ar4p57p5js] { fill: var(--factory-glass-fill, #55bdad); stroke: #79cdbc; stroke-width: 1; }
.press-cylinder[b-ar4p57p5js] { fill: #6f827a; stroke: #c1d0c7; stroke-width: 1.4; }
.press-ram[b-ar4p57p5js] { fill: #b3c0b8; stroke: #34453d; stroke-width: 1.2; }
.press-die[b-ar4p57p5js] { fill: #cda95c; stroke: #f2d584; stroke-width: 1.4; }
.assembly-part[b-ar4p57p5js] { fill: #514b73; stroke: #c2b9ff; stroke-width: 2; }
.robot-arm[b-ar4p57p5js] { fill: #b09654; stroke: #f2d88f; stroke-width: 1.2; }
.robot-joint[b-ar4p57p5js] { fill: #e8dba6; stroke: #463c25; stroke-width: 1; }

.is-active .machine-shell[b-ar4p57p5js], .is-active .junction-hub[b-ar4p57p5js], .is-active .splitter-housing[b-ar4p57p5js] { stroke: #d0edaa; filter: drop-shadow(0 0 3px #b5e77a99); }
.is-active .furnace-flame[b-ar4p57p5js] { animation: furnace-pulse-b-ar4p57p5js .45s ease-in-out infinite alternate; }
.is-active .gear-ring[b-ar4p57p5js] { animation: gear-turn-b-ar4p57p5js 2.8s linear infinite; transform-origin: 32px 31px; }
.is-active .robot-arm[b-ar4p57p5js] { animation: robot-bob-b-ar4p57p5js .5s ease-in-out infinite alternate; transform-origin: 32px 33px; }
.is-active.kind-conveyor .belt-rollers[b-ar4p57p5js] { animation: belt-run-b-ar4p57p5js .7s linear infinite; }

@keyframes furnace-pulse-b-ar4p57p5js { from { transform: scale(.86); opacity: .78; } to { transform: scale(1.12); opacity: 1; } }
@keyframes gear-turn-b-ar4p57p5js { to { transform: rotate(360deg); } }
@keyframes robot-bob-b-ar4p57p5js { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
@keyframes belt-run-b-ar4p57p5js { to { stroke-dasharray: 2 2; stroke-dashoffset: -8; } }

@media (prefers-reduced-motion: reduce) {
    .is-active .furnace-flame[b-ar4p57p5js], .is-active .gear-ring[b-ar4p57p5js], .is-active .robot-arm[b-ar4p57p5js], .is-active.kind-conveyor .belt-rollers[b-ar4p57p5js] { animation: none; }
}
/* /Components/FactoryLevelView.razor.rz.scp.css */
.factory-level[b-qhdhlgjn7y] {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 30px clamp(16px, 3vw, 42px) 56px;
    color: var(--text);
}

.factory-mission[b-qhdhlgjn7y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding: 25px 28px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    border-radius: 17px;
    background: radial-gradient(circle at 90% 0, color-mix(in srgb, var(--brand) 11%, transparent), transparent 24rem), var(--panel);
}

.factory-mission h1[b-qhdhlgjn7y] { margin: 10px 0 8px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.045em; }
.factory-mission p[b-qhdhlgjn7y] { max-width: 780px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.factory-eyebrow[b-qhdhlgjn7y], .factory-order-card > span[b-qhdhlgjn7y], .factory-panel-heading > span[b-qhdhlgjn7y], .factory-tool-instructions > span[b-qhdhlgjn7y],
.factory-board-toolbar > div[b-qhdhlgjn7y], .factory-simulation-head > div:first-child > span[b-qhdhlgjn7y],
.factory-objective > span[b-qhdhlgjn7y] {
    color: var(--brand);
    font: 800 9px/1.2 ui-monospace, monospace;
    letter-spacing: .13em;
}
.factory-objective[b-qhdhlgjn7y] { display: flex; align-items: center; gap: 13px; width: fit-content; margin-top: 16px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--panel-2) 78%, transparent); }
.factory-objective strong[b-qhdhlgjn7y] { font-size: 12px; }
.factory-order-card[b-qhdhlgjn7y] { min-width: 210px; padding: 17px; display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.18); }
.factory-order-card > span[b-qhdhlgjn7y] { color: var(--muted); }
.factory-order-card > strong[b-qhdhlgjn7y] { color: var(--green); font-size: 22px; letter-spacing: -.03em; }
.factory-order-card > strong small[b-qhdhlgjn7y] { color: var(--dim); font-size: 14px; }
.factory-order-card > small[b-qhdhlgjn7y] { color: var(--dim); font-size: 10px; }

.factory-workspace[b-qhdhlgjn7y] { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 15px; margin-top: 16px; align-items: start; }
.factory-tools[b-qhdhlgjn7y], .factory-board-column[b-qhdhlgjn7y], .factory-simulation-panel[b-qhdhlgjn7y] { border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.factory-tools[b-qhdhlgjn7y] { max-height: calc(100vh - 112px); overflow-y: auto; padding: 15px 12px; scrollbar-color: var(--line-strong) transparent; }
.factory-panel-heading[b-qhdhlgjn7y] { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 4px 12px; border-bottom: 1px solid var(--line); }
.factory-panel-heading small[b-qhdhlgjn7y] { color: var(--dim); font-size: 9px; }
.factory-tool-list[b-qhdhlgjn7y] { display: grid; gap: 12px; padding: 12px 0 8px; }
.factory-tool-group[b-qhdhlgjn7y] { display: grid; gap: 5px; }
.factory-tool-group > span[b-qhdhlgjn7y] { padding: 0 5px 3px; color: var(--dim); font: 800 8px/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.factory-tool[b-qhdhlgjn7y] { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 7px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; transition: background .15s, border-color .15s; }
.factory-tool:hover[b-qhdhlgjn7y], .factory-erase:hover[b-qhdhlgjn7y] { background: var(--panel-2); }
.factory-tool.is-selected[b-qhdhlgjn7y], .factory-erase.is-selected[b-qhdhlgjn7y] { border-color: color-mix(in srgb, var(--brand) 48%, transparent); background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.factory-tool-icon[b-qhdhlgjn7y] { display: grid; place-items: center; width: 38px; height: 38px; overflow: visible; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.factory-tool-icon .factory-building-visual[b-qhdhlgjn7y] { width: 35px; height: 35px; }
.factory-tool-icon.kind-miner[b-qhdhlgjn7y] { color: #e1bc72; }
.factory-tool-icon.kind-conveyor[b-qhdhlgjn7y] { color: #9dc2c4; }
.factory-tool-icon.kind-smelter[b-qhdhlgjn7y] { color: #f48b5d; }
.factory-tool-icon.kind-assembler[b-qhdhlgjn7y] { color: #a8a0ff; }
.factory-tool > span:last-child[b-qhdhlgjn7y] { display: grid; gap: 3px; min-width: 0; }
.factory-tool strong[b-qhdhlgjn7y] { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.factory-tool small[b-qhdhlgjn7y] { color: var(--dim); font-size: 9px; }
.factory-erase[b-qhdhlgjn7y] { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; text-align: left; }
.factory-tool-instructions[b-qhdhlgjn7y] { margin-top: 18px; padding: 12px 9px 2px; border-top: 1px solid var(--line); }
.factory-tool-instructions p[b-qhdhlgjn7y], .factory-tool-instructions small[b-qhdhlgjn7y] { color: var(--muted); font-size: 10px; line-height: 1.55; }
.factory-tool-instructions p[b-qhdhlgjn7y] { margin: 8px 0; }
.factory-tool-instructions small[b-qhdhlgjn7y] { color: var(--dim); }
.factory-recipe-guide[b-qhdhlgjn7y] { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.factory-recipe-guide > strong[b-qhdhlgjn7y] { color: var(--brand); font: 800 8px/1.2 ui-monospace, monospace; letter-spacing: .11em; }
.factory-recipe-row[b-qhdhlgjn7y] { display: grid; gap: 3px; margin-top: 9px; }
.factory-recipe-row > span[b-qhdhlgjn7y] { color: var(--text); font-size: 9px; font-weight: 800; }
.factory-recipe-row small[b-qhdhlgjn7y] { color: var(--muted); font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }

.factory-board-column[b-qhdhlgjn7y] { min-width: 0; padding: 12px; }
.factory-board-toolbar[b-qhdhlgjn7y] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 5px 12px; }
.factory-board-toolbar > div[b-qhdhlgjn7y] { display: flex; align-items: center; gap: 8px; color: var(--text); }
.factory-status-dot[b-qhdhlgjn7y] { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px color-mix(in srgb, var(--green) 70%, transparent); }
.factory-delivery-meter[b-qhdhlgjn7y] { color: var(--muted); font: 800 9px/1 ui-monospace, monospace; letter-spacing: .08em; }
.factory-delivery-meter b[b-qhdhlgjn7y] { padding: 0 3px; color: var(--green); font-size: 13px; }
.factory-board-scroll[b-qhdhlgjn7y] { overflow: auto; padding: 1px 1px 8px; border-radius: 8px; scrollbar-color: var(--line-strong) transparent; }
.factory-board[b-qhdhlgjn7y] { display: grid; grid-template-columns: repeat(var(--grid-size), minmax(38px, 1fr)); width: min(100%, 900px); min-width: max-content; margin: 0 auto; overflow: hidden; border: 1px solid #66716a70; border-radius: 7px; background: #101714; }
.factory-cell[b-qhdhlgjn7y] { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 38px; padding: 2px; overflow: hidden; border: 0; border-right: 1px solid rgba(190,218,197,.095); border-bottom: 1px solid rgba(190,218,197,.095); background: repeating-linear-gradient(135deg, #19221d, #19221d 5px, #1b2520 5px, #1b2520 10px); color: var(--text); }
.factory-cell:hover[b-qhdhlgjn7y] { z-index: 1; outline: 2px solid var(--brand); outline-offset: -2px; }
.factory-cell.has-deposit[b-qhdhlgjn7y] { background: radial-gradient(circle, rgba(218,168,91,.27), transparent 63%), #27231a; }
.factory-cell.is-blocked[b-qhdhlgjn7y] { background: repeating-linear-gradient(135deg, #393a36, #393a36 6px, #30312e 6px, #30312e 12px); }
.factory-cell.is-delivery[b-qhdhlgjn7y] { background: radial-gradient(circle, rgba(183,237,99,.2), transparent 65%), #182219; }
.factory-cell-resource[b-qhdhlgjn7y] { position: absolute; z-index: 2; inset: 2px 4px auto auto; color: #d9ab58; font-size: 9px; text-shadow: 0 1px 2px #000; }
.factory-cell-obstacle[b-qhdhlgjn7y] { display: grid; place-items: center; gap: 1px; color: #aaa9a1; font-size: 18px; line-height: 1; text-shadow: 0 1px 3px #000; }
.factory-cell-obstacle small[b-qhdhlgjn7y] { font: 800 6px/1 ui-monospace, monospace; letter-spacing: .05em; }
.factory-cell-delivery[b-qhdhlgjn7y] { display: grid; justify-items: center; gap: 0; color: var(--green); font-size: 21px; line-height: 1; text-shadow: 0 0 12px rgba(183,237,99,.45); }
.factory-cell-delivery small[b-qhdhlgjn7y] { font: 800 6px/1 ui-monospace, monospace; letter-spacing: .03em; }
.factory-cell-building[b-qhdhlgjn7y] { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: none; }
.factory-cell-building > b[b-qhdhlgjn7y] { font-size: clamp(16px, 2vw, 26px); line-height: 1; }
.factory-cell-building > i[b-qhdhlgjn7y] { position: absolute; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #131916; color: #e8f1eb; font: 800 11px/1 ui-monospace, monospace; font-style: normal; box-shadow: 0 1px 4px #000; }
.factory-cell-building > i:not(.machine-direction)[b-qhdhlgjn7y] { right: -4px; bottom: -4px; }
.factory-cell-building .machine-direction[b-qhdhlgjn7y] { top: -5px; right: -5px; color: #bfc9c2; }
.factory-moving-item[b-qhdhlgjn7y] { position: absolute; z-index: 2; width: 8px; height: 8px; border: 1px solid #fff4b9; border-radius: 50%; background: #ffd86b; color: transparent; box-shadow: 0 0 8px #ffd86b; pointer-events: none; }
.factory-moving-item:nth-last-of-type(2)[b-qhdhlgjn7y] { transform: translate(-8px, 6px); }
.factory-moving-item:nth-last-of-type(3)[b-qhdhlgjn7y] { transform: translate(8px, -6px); }
.factory-machine-count[b-qhdhlgjn7y] { position: absolute; z-index: 3; right: 1px; bottom: 1px; padding: 2px 3px; border-radius: 4px; background: #111915e8; color: #d3ded6; font: 700 7px/1 ui-monospace, monospace; pointer-events: none; }

.factory-simulation-panel[b-qhdhlgjn7y] { margin-top: 11px; padding: 12px 14px; background: var(--panel-2); }
.factory-simulation-head[b-qhdhlgjn7y] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.factory-simulation-head > div:first-child[b-qhdhlgjn7y] { display: grid; gap: 4px; }
.factory-simulation-head > div:first-child > small[b-qhdhlgjn7y] { color: var(--dim); font: 9px/1.2 ui-monospace, monospace; }
.factory-simulation-controls[b-qhdhlgjn7y] { display: flex; flex-wrap: wrap; gap: 6px; }
.factory-simulation-controls button[b-qhdhlgjn7y] { min-height: 30px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel-3); color: var(--text); font-size: 10px; }
.factory-simulation-controls button:hover:not(:disabled)[b-qhdhlgjn7y] { border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.factory-simulation-controls .factory-run-button[b-qhdhlgjn7y] { border-color: transparent; background: var(--brand); color: #20130c; font-weight: 800; }
.factory-timeline[b-qhdhlgjn7y] { height: 3px; margin-top: 12px; overflow: hidden; border-radius: 4px; background: var(--line); }
.factory-timeline > span[b-qhdhlgjn7y] { display: block; height: 100%; background: var(--green); transition: width .1s linear; }
.factory-result[b-qhdhlgjn7y] { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.factory-result > span[b-qhdhlgjn7y] { font-size: 17px; }
.factory-result > div[b-qhdhlgjn7y] { display: grid; gap: 4px; }
.factory-result strong[b-qhdhlgjn7y] { font-size: 11px; }
.factory-result small[b-qhdhlgjn7y] { color: var(--dim); font-size: 9px; }
.factory-result.is-passed[b-qhdhlgjn7y], .factory-server-result.is-passed[b-qhdhlgjn7y] { border-color: #7fae493d; background: rgba(183,237,99,.06); color: var(--green); }
.factory-result.is-failed[b-qhdhlgjn7y], .factory-server-result.is-failed[b-qhdhlgjn7y] { border-color: #e9ac5740; background: rgba(240,189,99,.055); color: var(--amber); }
.factory-errors[b-qhdhlgjn7y] { margin: 9px 0 0; padding-left: 18px; color: var(--red); font-size: 10px; line-height: 1.55; }
.factory-submit-button[b-qhdhlgjn7y] { margin-top: 10px; padding: 10px 13px; border: 0; border-radius: 8px; background: var(--green); color: #17200f; font-size: 11px; font-weight: 850; }
.factory-submit-button:hover[b-qhdhlgjn7y] { filter: brightness(1.07); }
.factory-server-result[b-qhdhlgjn7y] { display: grid; gap: 5px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.factory-server-result strong[b-qhdhlgjn7y] { font: 800 9px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
.factory-server-result span[b-qhdhlgjn7y], .factory-submit-error[b-qhdhlgjn7y], .factory-submit-pending[b-qhdhlgjn7y] { margin: 0; font-size: 10px; }
.factory-submit-error[b-qhdhlgjn7y] { margin-top: 9px; color: var(--red); }
.factory-submit-pending[b-qhdhlgjn7y] { margin-top: 9px; color: var(--muted); }
.factory-story[b-qhdhlgjn7y] { margin-top: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font-size: 12px; }
.factory-story summary[b-qhdhlgjn7y] { color: var(--text); cursor: pointer; font-weight: 700; }
.factory-story p[b-qhdhlgjn7y] { margin-bottom: 0; line-height: 1.65; }

@media (max-width: 980px) {
    .factory-workspace[b-qhdhlgjn7y] { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .factory-level[b-qhdhlgjn7y] { padding: 18px 12px 40px; }
    .factory-mission[b-qhdhlgjn7y] { flex-direction: column; padding: 18px; }
    .factory-order-card[b-qhdhlgjn7y] { width: 100%; min-width: 0; grid-template-columns: 1fr auto; align-items: center; }
    .factory-order-card > span[b-qhdhlgjn7y] { grid-column: 1 / -1; }
    .factory-order-card > small[b-qhdhlgjn7y] { text-align: right; }
    .factory-workspace[b-qhdhlgjn7y] { grid-template-columns: 1fr; }
    .factory-tools[b-qhdhlgjn7y] { padding: 12px; }
    .factory-tool-list[b-qhdhlgjn7y] { grid-template-columns: 1fr; }
    .factory-tool-group[b-qhdhlgjn7y] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .factory-tool-group > span[b-qhdhlgjn7y] { grid-column: 1 / -1; }
    .factory-tool-instructions[b-qhdhlgjn7y] { margin-top: 10px; }
    .factory-board-column[b-qhdhlgjn7y] { padding: 8px; }
    .factory-board-toolbar[b-qhdhlgjn7y] { padding: 4px 3px 10px; }
    .factory-board[b-qhdhlgjn7y] { width: max-content; margin: 0; }
    .factory-cell[b-qhdhlgjn7y] { width: 39px; min-width: 39px; }
    .factory-simulation-panel[b-qhdhlgjn7y] { padding: 10px; }
}
/* /Components/MarkdownPageContent.razor.rz.scp.css */
.markdown-learning-page[b-wojwn4xegn] {
    width: min(1360px, calc(100% - 64px));
    margin: 30px auto 72px;
    color: #e9e9ec;
}

.markdown-learning-page[b-wojwn4xegn],
.markdown-learning-page[b-wojwn4xegn]  * {
    -webkit-user-select: text;
    user-select: text;
}

.markdown-learning-page[b-wojwn4xegn]  ::selection {
    background: rgb(243 111 41 / 38%);
    color: #fff;
}

.markdown-learning-section[b-wojwn4xegn] {
    margin: 0 0 18px;
    padding-left: 12px;
    border-left: 2px solid #f36f29;
    color: #aaaab0;
    font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.markdown-step-card[b-wojwn4xegn] {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e9e9ec;
    box-shadow: none;
}

.markdown-step-header[b-wojwn4xegn] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 24px;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.markdown-step-eyebrow[b-wojwn4xegn] {
    color: #f36f29;
    font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .09em;
}

.markdown-step-header h1[b-wojwn4xegn] {
    margin: 9px 0 0;
    color: #f4f4f5;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 760;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.markdown-step-status[b-wojwn4xegn] {
    flex: 0 0 auto;
    margin-bottom: 3px;
    padding: 5px 0 5px 12px;
    border-left: 2px solid #7ebf86;
    color: #b4dabb;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.markdown-step-content[b-wojwn4xegn] {
    width: min(100%, 1040px);
    min-height: 180px;
    margin: 0 auto;
    padding: 30px 0 46px;
    color: #d1d1d5;
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.markdown-step-content[b-wojwn4xegn]  > :first-child { margin-top: 0; }
.markdown-step-content[b-wojwn4xegn]  > :last-child { margin-bottom: 0; }
.markdown-step-content[b-wojwn4xegn]  h1,
.markdown-step-content[b-wojwn4xegn]  h2,
.markdown-step-content[b-wojwn4xegn]  h3,
.markdown-step-content[b-wojwn4xegn]  h4 {
    margin: 1.8em 0 .65em;
    color: #f2f2f4;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.markdown-step-content[b-wojwn4xegn]  h1 { font-size: 1.8em; }
.markdown-step-content[b-wojwn4xegn]  h2 { font-size: 1.45em; }
.markdown-step-content[b-wojwn4xegn]  h3 { font-size: 1.2em; }
.markdown-step-content[b-wojwn4xegn]  p { max-width: 78ch; margin: 1.05em 0; }
.markdown-step-content[b-wojwn4xegn]  a { color: #ff9a63; text-decoration-color: rgb(255 154 99 / 50%); text-underline-offset: 3px; }
.markdown-step-content[b-wojwn4xegn]  blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 18px;
    border-left: 2px solid #f36f29;
    color: #b8b8be;
}
.markdown-step-content[b-wojwn4xegn]  ul,
.markdown-step-content[b-wojwn4xegn]  ol { padding-left: 1.5em; }
.markdown-step-content[b-wojwn4xegn]  li + li { margin-top: .35em; }
.markdown-step-content[b-wojwn4xegn]  input[type="checkbox"] { accent-color: #f36f29; }
.markdown-step-content[b-wojwn4xegn]  pre {
    max-width: 100%;
    overflow: auto;
    margin: 1.4em 0;
    padding: 16px 18px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-left: 2px solid #f36f29;
    border-radius: 4px;
    background: #121214;
    color: #e6e6e9;
    font-size: 13px;
    line-height: 1.65;
}
.markdown-step-content[b-wojwn4xegn]  :not(pre) > code {
    padding: 2px 5px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 3px;
    background: #171719;
    color: #ffad80;
    font-size: .9em;
}
.markdown-step-content[b-wojwn4xegn]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
}
.markdown-step-content[b-wojwn4xegn]  th,
.markdown-step-content[b-wojwn4xegn]  td {
    min-width: 100px;
    padding: 9px 12px;
    border: 1px solid rgb(255 255 255 / 14%);
    text-align: left;
}
.markdown-step-content[b-wojwn4xegn]  th { background: rgb(255 255 255 / 5%); color: #f2f2f4; }
.markdown-step-content[b-wojwn4xegn]  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px 0;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 6px;
}
.markdown-step-content[b-wojwn4xegn]  hr { border: 0; border-top: 1px solid rgb(255 255 255 / 16%); margin: 2em 0; }
.markdown-step-content[b-wojwn4xegn]  .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 8px 0; text-align: center; }
.markdown-step-content[b-wojwn4xegn]  .mermaid { max-width: 100%; overflow: auto; margin: 24px 0; text-align: left; }
.markdown-step-content[b-wojwn4xegn]  .mermaid svg { max-width: 100%; height: auto; }

.markdown-step-error[b-wojwn4xegn],
.markdown-step-finished[b-wojwn4xegn] {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 0;
    border-left: 2px solid #aa5b4d;
    border-radius: 0;
    background: rgb(170 91 77 / 9%);
    color: #ffb4a5;
    font-size: 13px;
}
.markdown-step-finished[b-wojwn4xegn] { border-left-color: #f36f29; background: rgb(243 111 41 / 8%); color: #ffb184; }

.markdown-step-footer[b-wojwn4xegn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0 0;
    border-top: 1px solid rgb(255 255 255 / 14%);
}
.markdown-step-footer > span[b-wojwn4xegn] { color: #a4a4ab; font-size: 13px; }
.markdown-step-footer button[b-wojwn4xegn] {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #f36f29;
    border-radius: 7px;
    background: #f36f29;
    color: #17110e;
    font: 720 14px/1 ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
}
.markdown-step-footer button:hover[b-wojwn4xegn] { background: #ff8547; border-color: #ff8547; }
.markdown-step-footer button:disabled[b-wojwn4xegn] { opacity: .65; cursor: wait; }

@media (max-width: 700px) {
    .markdown-learning-page[b-wojwn4xegn] { width: calc(100% - 32px); margin: 18px auto 42px; }
    .markdown-step-header[b-wojwn4xegn] { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 18px; }
    .markdown-step-header h1[b-wojwn4xegn] { font-size: clamp(26px, 8vw, 36px); }
    .markdown-step-status[b-wojwn4xegn] { margin: 0; }
    .markdown-step-content[b-wojwn4xegn] { padding: 22px 0 30px; font-size: 15px; }
    .markdown-step-footer[b-wojwn4xegn] { align-items: stretch; flex-direction: column; padding-top: 16px; }
    .markdown-step-footer button[b-wojwn4xegn] { width: 100%; }
}

/* Student learning content uses the same light reading palette as the guide. */
.markdown-learning-page[b-wojwn4xegn] { color: #252b33; }
.markdown-learning-section[b-wojwn4xegn] { color: #68727e; }
.markdown-step-card[b-wojwn4xegn] { color: #252b33; }
.markdown-step-header[b-wojwn4xegn] { border-color: #e1e5e9; }
.markdown-step-header h1[b-wojwn4xegn],
.markdown-step-content[b-wojwn4xegn]  h1,
.markdown-step-content[b-wojwn4xegn]  h2,
.markdown-step-content[b-wojwn4xegn]  h3,
.markdown-step-content[b-wojwn4xegn]  h4 { color: #20252c; }
.markdown-step-status[b-wojwn4xegn] { border-left-color: #5b9a69; color: #397448; }
.markdown-step-content[b-wojwn4xegn] { color: #3b4550; }
.markdown-step-content[b-wojwn4xegn]  a { color: #b84e19; text-decoration-color: rgb(184 78 25 / 38%); }
.markdown-step-content[b-wojwn4xegn]  blockquote { color: #58636e; }
.markdown-step-content[b-wojwn4xegn]  pre {
    border-color: #e0e4e8;
    background: #f5f6f8;
    color: #26313d;
}
.markdown-step-content[b-wojwn4xegn]  :not(pre) > code {
    border-color: #e0e4e8;
    background: #f4f5f7;
    color: #9b4318;
}
.markdown-step-content[b-wojwn4xegn]  th,
.markdown-step-content[b-wojwn4xegn]  td { border-color: #dfe3e8; }
.markdown-step-content[b-wojwn4xegn]  th { background: #f1f3f5; color: #252b33; }
.markdown-step-content[b-wojwn4xegn]  img { border-color: #dfe3e8; }
.markdown-step-content[b-wojwn4xegn]  hr { border-top-color: #e1e5e9; }
.markdown-step-content[b-wojwn4xegn]  .katex-display,
.markdown-step-content[b-wojwn4xegn]  .mermaid {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}
.markdown-step-content[b-wojwn4xegn]  .mermaid svg { max-width: none; min-width: max-content; }
.markdown-step-error[b-wojwn4xegn] {
    border-left-color: #b83b3e;
    background: #fff1f1;
    color: #8e252b;
}
.markdown-step-finished[b-wojwn4xegn] {
    border-left-color: #d85c20;
    background: #fff4ed;
    color: #8f4017;
}
.markdown-step-footer[b-wojwn4xegn] { border-top-color: #e1e5e9; }
.markdown-step-footer > span[b-wojwn4xegn] { color: #59636e; }

@media (max-width: 700px) {
    .markdown-learning-page[b-wojwn4xegn] { width: calc(100% - 32px); }
    .markdown-step-content[b-wojwn4xegn] { min-width: 0; overflow-wrap: anywhere; }
    .markdown-step-content[b-wojwn4xegn]  pre { padding: 13px 14px; }
    .markdown-step-content[b-wojwn4xegn]  table { overscroll-behavior-inline: contain; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Общие стили макета находятся в wwwroot/css/app.css. */
/* /Layout/NavMenu.razor.rz.scp.css */
/* Навигация использует общую дизайн-систему приложения. */
/* /Pages/FactoryDemoPage.razor.rz.scp.css */
.factory-demo-loading[b-zb4ctqef1m], .factory-demo-error[b-zb4ctqef1m] { width: min(1180px, 100%); min-height: 45vh; margin: 0 auto; padding: 44px 24px; display: grid; align-content: center; justify-items: center; text-align: center; }
.factory-demo-loading span[b-zb4ctqef1m] { width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: factory-demo-spin-b-zb4ctqef1m .8s linear infinite; }
.factory-demo-loading p[b-zb4ctqef1m], .factory-demo-error p[b-zb4ctqef1m] { color: var(--muted); }
.factory-demo-error h1[b-zb4ctqef1m] { font-size: 25px; }
@keyframes factory-demo-spin-b-zb4ctqef1m { to { transform: rotate(360deg); } }

.factory-demo-intro[b-zb4ctqef1m] { width: min(1320px, 100%); margin: 0 auto; padding: 31px clamp(18px, 4vw, 48px) 19px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.factory-demo-intro > div:first-child > span[b-zb4ctqef1m] { color: var(--brand); font: 800 9px/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.factory-demo-intro h1[b-zb4ctqef1m] { margin: 8px 0 7px; font-size: clamp(26px, 3.5vw, 39px); letter-spacing: -.05em; }
.factory-demo-intro p[b-zb4ctqef1m] { max-width: 770px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.factory-demo-step[b-zb4ctqef1m] { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.factory-demo-step b[b-zb4ctqef1m] { color: var(--green); font: 800 22px/1 ui-monospace, monospace; }
.factory-demo-step span[b-zb4ctqef1m] { color: var(--dim); font: 700 10px/1 ui-monospace, monospace; }

.factory-demo-levels[b-zb4ctqef1m] { width: min(1320px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.factory-demo-nav[b-zb4ctqef1m] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 10px; white-space: nowrap; }
.factory-demo-level-buttons[b-zb4ctqef1m] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.factory-demo-level-buttons button[b-zb4ctqef1m] { min-width: 0; min-height: 57px; padding: 8px 10px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); text-align: left; }
.factory-demo-level-buttons button.is-current[b-zb4ctqef1m] { border-color: color-mix(in srgb, var(--brand) 56%, transparent); background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.factory-demo-level-buttons button small[b-zb4ctqef1m] { color: var(--dim); font: 800 7px/1 ui-monospace, monospace; letter-spacing: .1em; }
.factory-demo-level-buttons button strong[b-zb4ctqef1m] { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.factory-demo-hint[b-zb4ctqef1m] { width: min(1320px, 100%); margin: 14px auto 0; padding: 0 clamp(18px, 4vw, 48px); color: var(--dim); font-size: 10px; line-height: 1.5; }
.factory-demo-hint span[b-zb4ctqef1m] { margin-right: 8px; color: var(--cyan); font: 800 8px/1 ui-monospace, monospace; letter-spacing: .1em; }

@media (max-width: 800px) {
    .factory-demo-intro[b-zb4ctqef1m] { padding-top: 21px; }
    .factory-demo-levels[b-zb4ctqef1m] { grid-template-columns: minmax(0, 1fr) auto; }
    .factory-demo-nav:first-child[b-zb4ctqef1m] { display: none; }
    .factory-demo-level-buttons[b-zb4ctqef1m] { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .factory-demo-nav:last-child[b-zb4ctqef1m] { grid-column: 2; grid-row: 1; }
}

@media (max-width: 520px) {
    .factory-demo-intro[b-zb4ctqef1m] { align-items: flex-start; }
    .factory-demo-intro p[b-zb4ctqef1m] { font-size: 11px; }
    .factory-demo-step[b-zb4ctqef1m] { padding: 8px 10px; }
    .factory-demo-levels[b-zb4ctqef1m] { grid-template-columns: minmax(0, 1fr); }
    .factory-demo-level-buttons[b-zb4ctqef1m] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .factory-demo-nav:last-child[b-zb4ctqef1m] { grid-column: 1; grid-row: 2; justify-self: end; }
}