body[data-world=magnet]{--magnet-up:#edbc70;--magnet-down:#78a8ef}
#magnetMachine .experiment-layout{grid-template-columns:minmax(0,1fr) 310px}
#magnetMachine .magnet-card{padding:22px}
.magnet-presets,.magnet-brush,.magnet-playback{display:flex;flex-wrap:wrap;gap:8px}
.magnet-preset-note,.magnet-help,.magnet-selection{font-size:13px;line-height:1.65;color:var(--exp-muted)}
.magnet-preset-note{margin:10px 0 24px}
.magnet-scenes{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:start}
.magnet-scenes>section{min-width:0}
.magnet-scene-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.magnet-scene-heading h2{font-size:16px;line-height:1.4;margin:0;font-weight:550}
.magnet-scene-heading span{font-size:12px;color:var(--exp-muted)}
#magnetMachine .magnet-stage{padding:0;border-radius:6px;background:none}
#magnetMachine .magnet-stage>canvas{width:100%;max-width:100%;cursor:crosshair;touch-action:pan-y;image-rendering:pixelated}
#magnetMachine .magnet-stage.is-painting>canvas{touch-action:none}
#magnetMachine .magnet-stage:focus-within{outline:2px solid var(--exp-cyan);outline-offset:4px}
.magnet-zoom{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:4px;aspect-ratio:1}
.magnet-spin{display:flex;align-items:center;justify-content:center;font-size:clamp(19px,2.3vw,30px);border-radius:4px;color:var(--magnet-down);background:#78a8ef1a;line-height:1}
.magnet-spin[data-spin="1"]{color:var(--magnet-up);background:#edbc701a}
.magnet-selection{margin:8px 0 0;font-size:12px;min-height:20px}
.magnet-legend{display:flex;flex-wrap:wrap;gap:22px;font-size:13px;color:var(--exp-muted);margin:16px 0}
.magnet-legend b{font-size:20px;font-weight:500;margin-inline-end:6px}
.magnet-up{color:var(--magnet-up)}.magnet-down{color:var(--magnet-down)}
.magnet-help{margin:8px 0 14px}
.magnet-overall{border-top:1px solid var(--exp-border);padding-top:20px;margin-top:20px}
.magnet-overall h2{font-size:16px;margin:0 0 14px;font-weight:550}
.magnet-balance{height:14px;background:var(--magnet-down);border-radius:4px;overflow:hidden;display:flex}
#upBar{height:100%;background:var(--magnet-up);width:50%}
.magnet-split{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--exp-muted);margin-top:8px;font-variant-numeric:tabular-nums}
.magnet-net{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:20px}
.magnet-net h3{margin:0;font-size:16px;font-weight:500}
.magnet-net output{font-size:26px;font-weight:550;font-variant-numeric:tabular-nums;line-height:1.3}
#magnetMachine #stat{color:var(--exp-muted);font-size:12px;line-height:1.7;margin-top:14px}
.magnet-playback{margin-top:20px}
#magnetMachine button:disabled{opacity:.45;cursor:not-allowed}
.magnet-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){#magnetMachine .experiment-layout{grid-template-columns:1fr}.magnet-spin{font-size:26px}}
@media(max-width:600px){#magnetMachine .magnet-card{padding:16px}.magnet-scenes{grid-template-columns:1fr;gap:20px}.magnet-zoom{aspect-ratio:1.5}.magnet-spin{font-size:24px}.magnet-presets button{flex:1 1 auto}.magnet-preset-note{margin-bottom:18px}.magnet-net output{font-size:24px}.magnet-split{font-size:12px}}