.training-lab { margin:30px 0; padding:24px; border:1px solid #ab80e55c; border-radius:12px; background:#121017; min-width:0; }
.training-lab { container-type:inline-size; }.training-visuals,.training-workspace,.training-lesson { min-width:0; }
.training-toolbar { position:sticky; top:84px; z-index:20; background:#121017f7; padding:10px 0; }
.training-focus .math-layout { display:block; }.training-focus .math-toc,.training-focus main>.math-hero,.training-focus main>.math-section:not(#pixel-lab),.training-focus main>footer,.training-focus #pixel-lab>:not(.training-lab) { display:none; }
.training-focus #pixel-lab { padding:20px; }.training-focus .training-lab { max-width:1440px; margin:0 auto; }
@container(min-width:850px) { .training-workspace { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:28px; align-items:start; }.training-view-controls { margin-top:0!important; }.training-stages { grid-template-columns:repeat(8,minmax(0,1fr))!important; } }
.training-lab h3 { font-size:clamp(23px,2.4vw,32px); line-height:1.5; margin:8px 0 16px; }.training-lab p { font-size:16px; line-height:1.75; }
.training-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:24px 0 12px; }
.training-toolbar button,.training-lab select,.training-lab input { min-height:44px; padding:8px 12px; border:1px solid #ab80e552; border-radius:6px; background:#211a2b; color:#ece2fa; font-family:inherit; font-size:14px; line-height:1.5; }
.training-toolbar button { cursor:pointer; font:14px/1.5 "Segoe UI",sans-serif; }.training-toolbar button:hover { border-color:var(--lime); }.training-toolbar button:disabled { opacity:.4; cursor:default; }.training-toolbar button.training-primary { background:var(--lime); color:#151a03; border-color:var(--lime); font-weight:600; }
.training-toolbar label { display:flex; align-items:center; gap:8px; font-size:14px; }.training-status { padding:10px 14px; border-left:3px solid var(--lime); background:#c4db2209; color:#deeab0!important; font-size:14px!important; }
.training-stages { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; gap:7px; margin:22px 0; }.training-stages li { min-width:0; }.training-stages span { display:block; padding:9px 10px; height:100%; font-size:12px; line-height:1.55; color:#aea4b9; border:1px solid #ab80e529; border-radius:5px; }.training-stages .complete { color:#d1d9a0; }.training-stages [aria-current="step"] { color:#eff9c0; border-color:var(--lime); background:#c4db2210; }
.training-lesson { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }.training-lesson [hidden] { display:none; }.training-lesson h4,.training-bottom h4 { margin:0 0 12px; color:#e2cef8; font-size:19px; }.training-lesson .derivation-math { font-size:14px; }
.training-code { margin:15px 0; border:1px solid #ab80e52d; border-radius:6px; padding:12px 15px; }.training-code summary { cursor:pointer; color:#d3b8ed; font-size:14px; }.training-code a { color:var(--accent); font-size:13px; text-decoration:underline; }.training-code pre { overflow:auto; max-height:330px; padding:14px; font:12px/1.7 ui-monospace,monospace; background:#0b0b0e; }
.training-view-controls { display:flex; flex-wrap:wrap; gap:12px 22px; margin:22px 0; align-items:end; }.training-view-controls label { display:grid; gap:8px; font-size:14px; min-width:0; }.training-view-controls label:first-child { flex:1; }.training-view-controls input { width:120px; }.training-view-controls p { flex-basis:100%; font-size:13px; margin:0; color:#bcb0c9; }
.training-images { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.training-images figure { min-width:0; margin:0; padding:10px; background:#09090c; border:1px solid var(--line); border-radius:8px; }.training-images figcaption { font-size:14px; color:#d5c3e6; margin-bottom:8px; }.training-images canvas { display:block; width:100%; height:auto; cursor:crosshair; image-rendering:pixelated; }
.training-image-wrap { position:relative; }.training-image-note { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:10px; font-size:13px; line-height:1.6; color:#bcb1c7; text-align:center; pointer-events:none; }.training-image-note[hidden] { display:none; }
.training-lab p.training-small { font-size:13px; color:#b0a6bd; }.training-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0; }.training-metrics>div { font-size:12px; border:1px solid #c4db222b; background:#c4db2207; padding:12px; border-radius:6px; min-width:0; }.training-metrics output { display:block; color:var(--lime); font:17px/1.8 ui-monospace,monospace; overflow-wrap:anywhere; }
.training-parameters { font:13px/1.8 ui-monospace,monospace; }.training-parameters th,.training-parameters td { padding:10px; white-space:nowrap; }.training-bottom { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }.training-bottom>div,.training-bottom figure { min-width:0; }.training-bottom p { font:13px/1.8 ui-monospace,"Microsoft YaHei",sans-serif; overflow-wrap:anywhere; }.training-bottom figure { margin:0; }.training-bottom figcaption { font-size:14px; color:#d5c3e6; }.training-bottom canvas { display:block; width:100%; height:auto; margin-top:15px; }
@media(max-width:1100px) { .training-lab { padding:18px; }.training-bottom { grid-template-columns:1fr; }.training-metrics output { font-size:15px; } }
@media(max-width:760px) { .training-lab { padding:14px; margin-left:-10px; margin-right:-10px; }.training-stages { grid-template-columns:repeat(2,minmax(0,1fr)); }.training-images { gap:6px; }.training-images figure { padding:5px; }.training-images figcaption { font-size:12px; }.training-metrics { gap:6px; }.training-metrics>div { padding:8px; }.training-metrics output { font-size:12px; }.training-toolbar { gap:7px; }.training-view-controls { gap:12px; }.training-view-controls label:first-child { flex-basis:100%; } }
@media print { .training-toolbar,.training-view-controls { display:none; }.training-lab { background:white; }.training-lab p,.training-lab h3,.training-lab h4,.training-stages span,.training-metrics output { color:#222; }.training-code { break-inside:avoid; } }
@media(max-width:760px) { .training-images { grid-template-columns:repeat(2,minmax(0,1fr)); }.training-images figure:last-child { grid-column:1/-1; }.training-images figure:last-child .training-image-wrap { max-width:160px; margin:auto; } }