.chem-trainer {
    --chem-ink: #f5f4ff;
    --chem-muted: #c3cbe6;
    --chem-line: #434d70;
    --chem-surface: #212642;
    --chem-well: #171c35;
    --chem-violet: #bdb0ff;
    --chem-mint: #79f1d5;
    max-width: 1260px;
    margin: 0 auto;
    padding: clamp(13px, 2.6vw, 32px);
    border: 1px solid #473b76;
    border-radius: clamp(12px, 2vw, 24px);
    background: radial-gradient(ellipse at 14% 0, #342560, #1b1939 43%, #161b33 84%);
    color: var(--chem-ink);
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
.chem-trainer *, .chem-trainer *::before, .chem-trainer *::after { box-sizing: border-box; }
.chem-trainer h1, .chem-trainer h2, .chem-trainer h3, .chem-trainer p { margin: 0; }
.chem-trainer h1, .chem-trainer h2, .chem-trainer h3 { color: var(--chem-ink); line-height: 1.13; }
.chem-trainer h1 { font-size: clamp(31px, 5vw, 55px); letter-spacing: -.045em; }
.chem-trainer h2 { font-size: clamp(23px, 3vw, 35px); letter-spacing: -.025em; }
.chem-trainer h3 { font-size: 16px; }
.chem-trainer [hidden] { display: none; }
.chem-trainer :focus-visible { outline: 3px solid var(--chem-mint); outline-offset: 3px; }

.chem-top, .chem-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
}
.chem-top { margin-bottom: 12px; flex-wrap: wrap; }
.chem-trainer .chem-back {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--chem-violet);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: .19em;
}
.chem-heading { margin-bottom: 16px; }
.chem-heading h1 { font-size: clamp(28px, 4vw, 41px); }
.chem-trainer .chem-case { margin-top: 5px; color: var(--chem-mint); font-weight: 700; }
.chem-trainer .chem-timer:not([hidden]) {
    display: grid;
    min-width: 84px;
    padding: 7px 12px;
    border: 1px solid var(--chem-line);
    border-radius: 10px;
    background: var(--chem-well);
    text-align: center;
}
.chem-timer span { color: var(--chem-muted); font-size: 12px; }
.chem-timer strong { color: var(--chem-mint); font-variant-numeric: tabular-nums; font-size: 20px; }

.chem-welcome {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.55fr);
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    padding: clamp(12px, 2vw, 24px);
    border: 1px solid #514485;
    border-radius: 18px;
    background: linear-gradient(115deg, #302152, #202243 55%, #191e37);
    box-shadow: 0 12px 30px #100c2855;
}
.chem-welcome-copy { min-width: 0; padding: 6px clamp(4px, 1.4vw, 19px); }
.chem-welcome-copy > p:not(.chem-case) { margin: 13px 0; color: var(--chem-muted); }
.chem-brief {
    margin-bottom: 15px;
    padding: 9px 12px;
    border-left: 3px solid var(--chem-mint);
    border-radius: 6px;
    background: #191c37;
    color: var(--chem-muted);
    font-size: 14px;
}
.chem-brief strong { color: var(--chem-ink); }
.chem-brief p + p { margin-top: 4px; }
.chem-start, .chem-result-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

.chem-primary, .chem-secondary, .chem-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: 1px solid var(--chem-line);
    border-radius: 9px;
    background: var(--chem-well);
    color: var(--chem-ink);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.chem-trainer .chem-primary {
    border-color: #a1ffe8;
    background: linear-gradient(110deg, #a0ffe4, #70e6e6);
    color: #14283a;
    box-shadow: 0 4px 14px #42e2bd24;
}
.chem-trainer .chem-primary:hover { background: #b3ffe8; color: #102236; }
.chem-trainer .chem-secondary { color: var(--chem-violet); border-color: #7068a1; }
.chem-trainer .chem-secondary:hover { background: #373050; color: #e4dcff; }

.chem-phases {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.chem-welcome-phases { margin-top: 16px; margin-bottom: 0; }
.chem-phases li {
    display: flex;
    min-height: 37px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 6px 5px;
    border: 1px solid #40486a;
    border-radius: 8px;
    background: #262b49;
    color: var(--chem-muted);
    text-align: center;
    font-size: clamp(11px, 1.4vw, 13px);
    font-weight: 650;
}
.chem-phases li[aria-current="step"] { border-color: #bcb0ff; background: #694dce; color: #fff; }
.chem-phases li.chem-phase-done { border-color: #407c75; background: #204448; color: #aaf5e2; }

.chem-board {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-areas: "task task" "station controls";
    align-items: start;
    gap: 13px 16px;
}
.chem-board-instrument { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.chem-task, .chem-station, .chem-controls, .chem-result {
    min-width: 0;
    padding: clamp(12px, 2vw, 22px);
    border: 1px solid var(--chem-line);
    border-radius: 13px;
    background: var(--chem-surface);
}
.chem-task { grid-area: task; }
.chem-task.chem-alert { border-color: #db9952; background: #453043; }
.chem-task > p { margin-top: 8px; color: var(--chem-muted); }
.chem-task .chem-alert-label { margin: 0 0 5px; color: #ffd092; font-weight: 750; }
.chem-station { grid-area: station; padding: clamp(10px, 1.7vw, 16px); }
.chem-station h3 { margin-bottom: 10px; }
.chem-lab-photo { min-width: 0; margin: 0; }
.chem-photo-frame {
    position: relative;
    isolation: isolate;
    border: 1px solid #625996;
    border-radius: 11px;
    background: #1c2037;
    cursor: url('/images/medical-trainer/cursor-scene-v1.svg') 5 3, default;
}
.chem-photo-frame > img { display: block; width: 100%; height: auto; border-radius: 10px; user-select: none; }
.chem-photo-help { margin: 8px 2px 0; color: var(--chem-muted); font-size: 13px; }
.chem-photo-touch { display: none; }

.chem-trainer .chem-photo-frame .chem-object {
    position: absolute;
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: url('/images/medical-trainer/cursor-action-v1.svg') 14 3, pointer;
}
.chem-object[data-object="hood"] { left: 4%; top: 3%; width: 50%; height: 18%; }
.chem-object[data-object="boiling-flask"] { left: 15%; top: 46%; width: 8%; height: 15%; }
.chem-object[data-object="condenser"] { left: 25%; top: 36%; width: 16%; height: 14%; }
.chem-object[data-object="receiver"] { left: 39%; top: 55%; width: 8%; height: 16%; }
.chem-object[data-object="stirrer"] { left: 15%; top: 61%; width: 12%; height: 12%; }
.chem-object[data-object="evaporator"] { left: 66%; top: 15%; width: 19%; height: 55%; }
.chem-object[data-object="controller"] { left: 57%; top: 58%; width: 8%; height: 13%; }
.chem-object[data-object="hplc"] { left: 88%; top: 21%; width: 11%; height: 35%; }

.chem-object-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    visibility: hidden;
    padding: 4px 8px;
    transform: translateX(-50%);
    border-radius: 5px;
    background: #adffe7;
    color: #10293c;
    font: 700 clamp(11px, 1.5vw, 13px)/1.4 Inter, system-ui, sans-serif;
    white-space: nowrap;
    pointer-events: none;
}
.chem-object[data-object="hood"] .chem-object-label { bottom: auto; top: calc(100% + 6px); }
.chem-object[data-object="hplc"] .chem-object-label { right: 0; left: auto; transform: none; }
.chem-trainer .chem-photo-frame .chem-object:is(:focus-visible, [aria-pressed="true"]) {
    z-index: 1;
    border-color: var(--chem-mint);
    background: #77f1d522;
}
.chem-object:is(:focus-visible, [aria-pressed="true"]) .chem-object-label { visibility: visible; }
@media (hover: hover) {
    .chem-trainer .chem-photo-frame .chem-object:hover {
        z-index: 2;
        border-color: var(--chem-mint);
        background: #77f1d522;
    }
    .chem-object:hover .chem-object-label { visibility: visible; }
    .chem-photo-frame:has(.chem-object:hover) .chem-object[aria-pressed="true"]:not(:hover):not(:focus-visible) .chem-object-label { visibility: hidden; }
}
@media (pointer: coarse) {
    .chem-photo-pointer { display: none; }
    .chem-photo-touch { display: inline; }
}

.chem-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: 6px;
    margin: 11px 0 0;
}
.chem-meter { padding: 7px 9px; border: 1px solid var(--chem-line); border-radius: 7px; background: var(--chem-well); }
.chem-meter dt, .chem-meter dd { margin: 0; overflow-wrap: anywhere; }
.chem-meter dt { color: var(--chem-muted); font-size: 12px; }
.chem-meter dd { color: var(--chem-mint); font-weight: 700; }

.chem-controls { grid-area: controls; }
.chem-controls h3 { margin-bottom: 10px; }
.chem-actions { display: grid; gap: 7px; }
.chem-trainer .chem-action {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 6px;
    border-color: #525e85;
    color: var(--chem-ink);
    font-weight: 650;
    text-align: left;
}
.chem-trainer .chem-action:hover:not(:disabled) { border-color: var(--chem-violet); background: #34305a; }
.chem-trainer .chem-action[data-done="true"] { border-color: #55978a; background: #214548; color: #b7f5e7; cursor: default; }
.chem-action[aria-disabled="true"]:not([data-done="true"]) { cursor: wait; }
.chem-action span:last-child:not(:first-child) { white-space: nowrap; font-size: 11px; }

.chem-trainer .chem-notice {
    margin: 0 0 10px;
    padding: 9px 11px;
    border-left: 3px solid #70dbc1;
    border-radius: 5px;
    background: #203e47;
    color: #d0f7ed;
}
.chem-trainer .chem-notice[data-kind="warning"] { border-color: #ffbc75; background: #473243; color: #ffe0bc; }

.chem-chart { margin: 0; }
.chem-chart canvas { display: block; width: 100%; height: clamp(165px, 20vw, 240px); border: 1px solid #48567b; border-radius: 8px; }
.chem-chart figcaption { margin-top: 7px; color: var(--chem-muted); font-size: 12px; }
.chem-chart-key { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 6px; color: var(--chem-ink); }
.chem-key-item { display: inline-flex; align-items: center; gap: 5px; }
.chem-key-line { width: 18px; border-top: 3px dashed #bbc7ef; }
.chem-key-line.experiment { border-top: 3px solid #6df5da; }
.chem-peak-table { width: 100%; margin: 9px 0 0; border-collapse: collapse; font-size: 12px; }
.chem-peak-table th, .chem-peak-table td { padding: 5px 4px; text-align: left; border-bottom: 1px solid #414b6f; }
.chem-peak-table thead { color: var(--chem-muted); }
.chem-peak-table tbody th { font-weight: 650; }

.chem-result { padding: clamp(15px, 4vw, 34px); }
.chem-result-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.chem-result-metrics > div {
    padding: 8px 11px;
    border: 1px solid var(--chem-line);
    border-radius: 9px;
    background: var(--chem-well);
}
.chem-result-metrics dt { color: var(--chem-muted); font-size: 13px; }
.chem-result-metrics dd { margin: 3px 0 0; font-size: clamp(16px, 2vw, 21px); font-weight: 750; font-variant-numeric: tabular-nums; }
.chem-result-score { color: var(--chem-mint); }
.chem-result[data-passed="false"] .chem-result-score { color: #ffd092; }
.chem-result .chem-result-summary { margin: 10px 0; color: var(--chem-muted); }
.chem-result h3 { margin-top: 18px; }
.chem-result-errors { margin: 8px 0 0; padding-left: 23px; }
.chem-result-errors li + li { margin-top: 9px; }
.chem-result-errors li p { margin-top: 4px; color: var(--chem-muted); }
.chem-result-errors [data-critical="true"] strong { color: #ffd092; }
.chem-result-outcomes { margin: 8px 0 0; }
.chem-result-outcomes > div {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: 3px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--chem-line);
}
.chem-result-outcomes dt { font-weight: 700; }
.chem-result-outcomes dd { margin: 0; color: var(--chem-muted); }
.chem-result-links { margin-top: 16px; }

@media (max-width: 560px) {
    .chem-result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chem-result-outcomes > div { grid-template-columns: minmax(0, 1fr); }
}

.chem-access { max-width: 480px; margin: 0 auto; }
.chem-access form { display: grid; gap: 8px; margin-top: 16px; }
.chem-trainer .chem-access label { color: var(--chem-ink); font-weight: 650; }
.chem-trainer .chem-access input[type="password"] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #6574a1;
    border-radius: 8px;
    background: var(--chem-well);
    color: var(--chem-ink);
    font: inherit;
}
.chem-trainer .chem-access .chem-notice { margin: 12px 0 0; }
.chem-access .chem-primary { margin-top: 6px; }

@media (max-width: 800px) {
    .chem-welcome { grid-template-columns: 1fr; }
    .chem-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "task" "station" "controls"; }
    .chem-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
    .chem-phases li { gap: 3px; padding-inline: 2px; }
}