.gpu-course{--gpu-bg: #071014;--gpu-panel: #0d1a20;--gpu-line: #2a4048;--gpu-ink: #edf5f5;--gpu-muted: #a6b5b9;--gpu-blue: #72c7e7;--gpu-violet: #ad91e8;--gpu-green: #72d6a5;--gpu-gold: #efc46a;--gpu-red: #f08378;display:grid;gap:2.25rem;padding-block:1rem 5rem;color:var(--gpu-ink)}.gpu-course button,.gpu-course input{font:inherit}.gpu-course button:focus-visible,.gpu-course input:focus-visible,.gpu-course a:focus-visible,.gpu-course summary:focus-visible{outline:3px solid var(--gpu-gold);outline-offset:3px}.gpu-orientation,.gpu-lesson__header{display:grid;gap:1.2rem;align-items:end}.gpu-orientation{padding:1.5rem 0 2rem;border-bottom:1px solid var(--gray-700)}.gpu-orientation>div:first-child{max-width:68ch}.gpu-orientation span,.gpu-lesson__header span,.gpu-viewport header span,.gpu-gate>strong,.gpu-prediction>span,.gpu-action>span,.gpu-evidence>div>span{color:var(--gpu-blue);font-size:.72rem;font-weight:850;letter-spacing:.035em}.gpu-orientation h2{max-width:21ch;margin-top:.55rem;font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:-.045em;line-height:1.08;text-wrap:balance}.gpu-orientation p{max-width:66ch;margin-top:.75rem;color:var(--gpu-muted);line-height:1.75;text-wrap:pretty}.gpu-mode{display:flex;flex-wrap:wrap;gap:.5rem}.gpu-mode button,.gpu-step-nav button,.gpu-gate button,.gpu-prediction button,.gpu-action button,.gpu-controls button,.gpu-controls-toggle,.gpu-pagination button,.gpu-pagination a{min-height:44px;padding:.68rem .82rem;border:1px solid var(--gpu-line);border-radius:.55rem;color:var(--gpu-ink);background:transparent;font-size:.78rem;font-weight:780;cursor:pointer}.gpu-mode button{display:grid;gap:.2rem;text-align:left}.gpu-mode button[aria-pressed=true]{border-color:var(--gpu-blue);background:color-mix(in srgb,var(--gpu-blue) 10%,transparent)}.gpu-mode small{color:var(--gpu-muted);font-size:.65rem;font-weight:500}.gpu-step-nav{display:grid;grid-template-columns:repeat(18,minmax(8.8rem,1fr));overflow-x:auto;overscroll-behavior-inline:contain;border-block:1px solid var(--gray-700);scrollbar-width:thin}.gpu-step-nav button{min-width:8.8rem;display:grid;gap:.3rem;align-content:start;border:0;border-right:1px solid var(--gray-700);border-radius:0;text-align:left}.gpu-step-nav button[aria-current=step]{background:color-mix(in srgb,var(--gpu-blue) 10%,transparent);box-shadow:inset 0 -3px var(--gpu-blue)}.gpu-step-nav span{color:var(--gpu-blue);font:750 .66rem ui-monospace,monospace}.gpu-step-nav strong{font-size:.72rem;line-height:1.4}.gpu-lesson{display:grid;gap:1.5rem}.gpu-lesson__header{scroll-margin-top:1rem}.gpu-lesson__header h2{max-width:21ch;margin-top:.4rem;font-size:clamp(2rem,6vw,4.4rem);letter-spacing:-.047em;line-height:1.06;text-wrap:balance}.gpu-prerequisite{max-width:56ch;padding:1rem;border:1px solid var(--gray-700);border-radius:.65rem;color:var(--gpu-muted);background:var(--gray-900);line-height:1.7}.gpu-prerequisite strong{display:block;color:var(--gpu-ink)}.gpu-prerequisite p{margin:.25rem 0 0}.gpu-workbench{position:relative;min-height:39rem;overflow:hidden;padding:1rem;border:1px solid var(--gpu-line);border-radius:.8rem;background:var(--gpu-bg)}.gpu-viewport{min-height:37rem;display:grid;gap:1rem}.gpu-viewport header{min-height:3.2rem;display:flex;gap:1rem;align-items:end;justify-content:space-between;padding-right:min(19rem,31vw)}.gpu-viewport header h2{margin-top:.3rem;font-size:1.1rem}.gpu-viewport header output{color:var(--gpu-green);font:800 .86rem ui-monospace,monospace}.gpu-viewport header output.is-over{color:var(--gpu-red)}.gpu-frame-identity{display:grid;grid-template-columns:auto minmax(1rem,1fr) auto minmax(1rem,1fr) auto;gap:.55rem;align-items:center;color:var(--gpu-muted);font-size:.65rem}.gpu-frame-identity i{height:1px;background:var(--gpu-line)}.gpu-frame-identity strong{color:var(--gpu-ink);text-align:center}.gpu-stage{position:relative;display:grid;gap:.8rem;padding:2.1rem .85rem .85rem;border:1px solid #21373f;background:repeating-linear-gradient(90deg,transparent 0 calc(16.666% - 1px),rgba(74,104,113,.13) calc(16.666% - 1px) 16.666%),#09191e}.gpu-ticks{position:absolute;inset:.35rem .85rem auto 4.6rem;height:1.2rem;color:#72868c;font:650 .55rem ui-monospace,monospace}.gpu-ticks span{position:absolute;transform:translate(-50%)}.gpu-deadline{position:absolute;z-index:2;top:0;bottom:0;width:1px;background:var(--gpu-red)}.gpu-deadline span{position:absolute;top:.25rem;left:.35rem;width:max-content;color:var(--gpu-red);font-size:.56rem;font-weight:800}.gpu-lane{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.55rem;align-items:center}.gpu-lane>strong{color:var(--gpu-muted);font-size:.68rem}.gpu-lane>div{min-height:2.3rem;display:flex;align-items:stretch;overflow:hidden;background:#0f262d}.gpu-lane i{min-width:.3rem;display:flex;align-items:center;overflow:hidden;padding-inline:.35rem;color:#071014;font-size:.57rem;font-style:normal;font-weight:850;white-space:nowrap}.gpu-lane .cpu{background:var(--gpu-blue)}.gpu-lane .wait{color:#fff;background:var(--gpu-violet)}.gpu-lane .vertex{color:#fff;background:#795cc0}.gpu-lane .raster{background:var(--gpu-gold)}.gpu-lane .fragment{background:var(--gpu-green)}.gpu-lane .bubble{color:var(--gpu-muted);background:repeating-linear-gradient(135deg,#1b3037 0 5px,#2a4048 5px 10px)}.gpu-evidence-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:1rem}.gpu-command-tickets,.gpu-pixel-grid{min-height:7.2rem;display:grid;gap:.55rem;align-content:center;padding:.75rem;border:1px solid #20363d;background:#09191e}.gpu-command-tickets>span,.gpu-pixel-grid>span{color:var(--gpu-muted);font-size:.62rem}.gpu-command-tickets>div{display:flex;flex-wrap:wrap;gap:.18rem}.gpu-command-tickets i{width:1.25rem;height:.7rem;border:1px solid #5aa8c3;background:color-mix(in srgb,var(--gpu-blue) 25%,transparent)}.gpu-command-tickets strong,.gpu-pixel-grid strong{color:var(--gpu-blue);font:750 .68rem ui-monospace,monospace}.gpu-pixel-grid i{min-height:3.4rem;display:block;clip-path:polygon(12% 86%,48% 8%,91% 86%);background:linear-gradient(#70c5dd66 1px,transparent 1px),linear-gradient(90deg,#70c5dd66 1px,transparent 1px),#132a31;background-size:calc(100% / var(--grid-density)) calc(100% / var(--grid-density))}.gpu-readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #20363d;background:#09191e}.gpu-readouts>div{display:grid;gap:.25rem;padding:.6rem .7rem;border-right:1px solid #20363d}.gpu-readouts>div:last-child{border-right:0}.gpu-readouts span{color:var(--gpu-muted);font-size:.6rem}.gpu-readouts strong{font:750 .68rem ui-monospace,monospace}.gpu-readouts strong.danger{color:var(--gpu-red)}.gpu-heatmap{display:grid;grid-template-columns:repeat(10,1fr);gap:.18rem;padding:.65rem;border:1px solid #20363d;background:#09191e}.gpu-heatmap i{min-height:.85rem;background:hsl(calc(205 - var(--heat) * 165) calc(45% + var(--heat) * 45%) calc(25% + var(--heat) * 60%))}.gpu-heatmap span{grid-column:1 / -1;margin-top:.25rem;color:var(--gpu-muted);font-size:.6rem}.gpu-diagnostic-chain{display:flex;gap:0;overflow-x:auto;padding:0;margin:0;list-style:none}.gpu-diagnostic-chain li{min-width:9rem;min-height:42px;display:flex;flex:1 0 auto;align-items:center;justify-content:center;padding:.5rem;border:1px solid #20363d;border-right:0;color:var(--gpu-muted);background:#09191e;font-size:.62rem;text-align:center}.gpu-diagnostic-chain li:last-child{border-right:1px solid #20363d}.gpu-visual-anchor{color:var(--gpu-muted);font-size:.65rem}.gpu-visual-anchor strong{color:var(--gpu-gold)}.gpu-viewport[data-focus=cpu] .gpu-lane:first-of-type,.gpu-viewport[data-focus=vertex] .gpu-lane:last-of-type,.gpu-viewport[data-focus=fragment] .gpu-lane:last-of-type,.gpu-viewport[data-focus=sync] .gpu-stage,.gpu-viewport[data-focus=heatmap] .gpu-heatmap{box-shadow:0 0 0 1px var(--gpu-gold)}.gpu-viewport[data-focus=vertex] .gpu-lane .vertex,.gpu-viewport[data-focus=fragment] .gpu-lane .fragment{box-shadow:inset 0 0 0 2px #fff}.gpu-controls-toggle{position:absolute;z-index:4;top:.65rem;right:.65rem;background:#10242b}.gpu-controls{position:absolute;z-index:3;top:3.65rem;right:.65rem;width:min(18rem,calc(100% - 1.3rem));display:grid;gap:.8rem;padding:.85rem;border:1px solid #3c5660;border-radius:.65rem;background:#0d2229;box-shadow:0 1.25rem 3rem #0006}.gpu-controls__status{display:flex;gap:.5rem;align-items:center;justify-content:space-between}.gpu-controls__status span{color:var(--gpu-muted);font-size:.65rem}.gpu-controls__status span.is-dirty{color:var(--gpu-gold)}.gpu-controls__status button{min-height:36px;padding:.4rem .55rem;font-size:.65rem}.gpu-controls__status button[aria-pressed=true]{border-color:var(--gpu-green);color:var(--gpu-green)}.gpu-controls label,.gpu-controls__ack{display:grid;gap:.5rem}.gpu-controls label>span{display:flex;justify-content:space-between;color:var(--gpu-muted);font-size:.72rem}.gpu-controls output{color:var(--gpu-gold);font:800 .78rem ui-monospace,monospace}.gpu-controls input{width:100%;min-height:44px;accent-color:var(--gpu-gold)}.gpu-controls__ack{padding:.65rem;border:1px solid var(--gpu-line);color:var(--gpu-muted);font-size:.68rem;line-height:1.5}.gpu-controls__ack strong{color:var(--gpu-ink)}.gpu-controls>p{color:var(--gpu-muted);font-size:.67rem;line-height:1.55}.gpu-controls .gpu-primary{border-color:var(--gpu-gold);color:#171105;background:var(--gpu-gold)}.gpu-controls button:disabled,.gpu-controls input:disabled{cursor:not-allowed;opacity:.45}.gpu-gate,.gpu-prediction,.gpu-action,.gpu-evidence{display:grid;gap:1rem;padding:1.2rem;border-block:1px solid var(--gray-700);background:color-mix(in srgb,var(--gray-900) 75%,transparent)}.gpu-gate p,.gpu-action p,.gpu-evidence>p,.gpu-formula p,.gpu-boundaries p{max-width:68ch;color:var(--gpu-muted);line-height:1.75}.gpu-gate p b{color:var(--gpu-ink)}.gpu-gate button,.gpu-action>button{width:fit-content;border-color:var(--gpu-gold);color:#171105;background:var(--gpu-gold)}.gpu-prediction h2{max-width:62ch;font-size:1.25rem;line-height:1.45}.gpu-prediction>div{display:flex;flex-wrap:wrap;gap:.55rem}.gpu-prediction>div button{background:#10262d}.gpu-prediction .gpu-skip{width:fit-content;padding-inline:0;border:0;color:var(--gpu-muted);text-decoration:underline;text-underline-offset:.25rem}.gpu-prediction-feedback{display:grid;gap:.3rem;padding:.75rem;border:1px solid #45606a;background:#0a1c22}.gpu-prediction-feedback[data-correct=true]{border-color:var(--gpu-green)}.gpu-prediction-feedback strong{color:var(--gpu-ink)}.gpu-action small{color:var(--gpu-muted);line-height:1.55}.gpu-evidence{border-color:color-mix(in srgb,var(--gpu-blue) 55%,var(--gray-700));background:color-mix(in srgb,var(--gpu-blue) 5%,var(--gpu-bg))}.gpu-evidence h2{margin-top:.3rem;font-size:1.3rem}.gpu-evidence>p strong{display:block;color:var(--gpu-ink)}.gpu-term{max-width:70ch;display:grid;margin:0;border-block:1px solid var(--gpu-line)}.gpu-term>div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--gpu-line)}.gpu-term>div:last-child{border-bottom:0}.gpu-term dt{color:var(--gpu-blue);font-size:.72rem;font-weight:800}.gpu-term dd{margin:0;color:var(--gpu-muted);line-height:1.65}.gpu-formula{max-width:70ch;display:grid;gap:.5rem;padding:1rem;border:1px solid var(--gpu-line);background:#08171c}.gpu-formula>span{color:var(--gpu-blue);font-size:.68rem;font-weight:800}.gpu-formula code{overflow-wrap:anywhere;color:var(--gpu-gold);font:800 .82rem/1.6 ui-monospace,monospace}.gpu-boundaries{max-width:70ch;display:grid;gap:.6rem}.gpu-boundaries p{padding:.75rem;border:1px solid var(--gpu-line)}.gpu-boundaries strong{display:block;color:var(--gpu-ink)}.gpu-evidence blockquote{max-width:70ch;margin:0;padding:1rem;border:1px solid var(--gpu-line);line-height:1.75}.gpu-evidence blockquote strong{display:block;color:var(--gpu-gold)}.gpu-evidence details{max-width:75ch;border-top:1px solid var(--gpu-line)}.gpu-evidence summary{min-height:50px;display:flex;align-items:center;color:var(--gpu-blue);font-size:.75rem;font-weight:800;cursor:pointer}.gpu-evidence details>p{color:var(--gpu-muted);font-size:.7rem;line-height:1.6}.gpu-evidence pre{overflow:auto;margin:0;padding:1rem;background:#061116}.gpu-evidence pre code{color:#d3edf5;font:700 .76rem/1.7 ui-monospace,monospace}.gpu-pagination{display:flex;gap:.65rem;justify-content:space-between}.gpu-pagination button,.gpu-pagination a{color:var(--gpu-blue);text-decoration:none}@media(min-width:50em){.gpu-orientation,.gpu-lesson__header{grid-template-columns:minmax(0,1fr) auto}.gpu-mode{justify-content:flex-end}}@media(max-width:42rem){.gpu-course{gap:1.55rem;padding-bottom:3rem}.gpu-mode button{flex:1}.gpu-step-nav{grid-template-columns:repeat(18,8.5rem)}.gpu-lesson__header h2{font-size:clamp(1.9rem,9vw,2.8rem)}.gpu-workbench{min-height:48rem;padding:.65rem}.gpu-viewport{min-height:46rem}.gpu-viewport header{padding-top:3.2rem;padding-right:0}.gpu-frame-identity{grid-template-columns:auto 1fr auto}.gpu-frame-identity i:first-of-type,.gpu-frame-identity strong{display:none}.gpu-lane{grid-template-columns:2.6rem minmax(0,1fr)}.gpu-lane i{font-size:0}.gpu-lane i:after{content:""}.gpu-ticks{left:3.9rem}.gpu-evidence-row,.gpu-readouts{grid-template-columns:1fr 1fr}.gpu-readouts>div:nth-child(2){border-right:0}.gpu-readouts>div:nth-child(-n+2){border-bottom:1px solid #20363d}.gpu-controls-toggle{top:.55rem;right:.55rem}.gpu-controls{top:3.45rem;right:.55rem;max-height:23rem;overflow-y:auto}.gpu-pagination>*{flex:1;text-align:center}.gpu-pagination span{display:none}.gpu-term>div{grid-template-columns:1fr;gap:.25rem}.gpu-prediction>div{display:grid}.gpu-prediction>div button{width:100%;text-align:left}}@media(prefers-reduced-motion:reduce){.gpu-course *{scroll-behavior:auto}}
