#experiment-magnet{padding-bottom:60px}#experiment-magnet[hidden]{display:none}#experiment-magnet [hidden]{display:none!important}#experiment-magnet .m1-workspace{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:24px;align-items:start}#experiment-magnet .m1-main{overflow:hidden}#experiment-magnet .m1-choices{display:flex;gap:7px;min-width:0}#experiment-magnet .m1-choices button{flex:1;min-width:0;min-height:42px;padding:10px 8px;border-radius:10px;border:1px solid #c9c9d1;background:#fff;font-size:12px;font-weight:600;line-height:1.4}#experiment-magnet .m1-choices button:hover{border-color:#6ea3d7;background:#f0f6ff}#experiment-magnet .m1-choices button[aria-pressed=true]{background:#0066cc;border-color:#0066cc;color:white}#experiment-magnet .m1-choices button[aria-pressed=true] b{color:inherit}#experiment-magnet .m1-n{color:#d93624}#experiment-magnet .m1-s{color:#0876ce}#experiment-magnet .m1-stage{margin:0 16px;position:relative;background:#fafafc;border-radius:16px;overflow:hidden}#experiment-magnet .m1-stage-hint{position:absolute;right:20px;top:14px;font-size:11px;color:#86868b;z-index:1;pointer-events:none}#experiment-magnet #m1-scene{display:block;width:100%;height:auto;touch-action:pan-y;user-select:none}#experiment-magnet .m1-legend{display:flex;flex-wrap:wrap;gap:9px 16px;padding:14px 28px 5px;font-size:10px;color:#6e6e73}#experiment-magnet .m1-legend span{display:flex;align-items:center;gap:6px}#experiment-magnet .m1-legend i{width:16px;height:3px;border-radius:2px}#experiment-magnet .m1-green{background:#2baf77}#experiment-magnet .m1-purple{background:#8a65cf}#experiment-magnet .m1-coral{background:#c6503b}#experiment-magnet .m1-orange{background:#dd922e}#experiment-magnet .m1-green-text{color:#279265}#experiment-magnet .m1-purple-text{color:#8a65cf}#experiment-magnet .m1-controls{padding:22px 28px 26px}#experiment-magnet .m1-range-label{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:13px;font-weight:600}#experiment-magnet .m1-range-label output{font-size:12px;font-weight:500;color:#6e6e73;white-space:nowrap;font-variant-numeric:tabular-nums}#experiment-magnet input[type=range]{margin:20px 0 12px}#experiment-magnet .m1-actions{display:flex;gap:8px;flex-wrap:wrap;margin:23px 0 10px;align-items:center}#experiment-magnet .m1-actions button{padding:10px 15px;font-size:12px;min-height:42px}#experiment-magnet .m1-actions .icon-button{padding:0;margin-left:auto;width:40px;font-size:24px}#experiment-magnet button:disabled{opacity:.4;cursor:default}#experiment-magnet .m1-subtle{font-size:10px;line-height:1.7;color:#86868b}#experiment-magnet .m1-settings{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}#experiment-magnet fieldset{border:0;min-width:0;padding:0;margin:0}#experiment-magnet legend{font-size:12px;font-weight:600;margin-bottom:9px;padding:0}#experiment-magnet legend span{font-size:10px;font-weight:400;color:#86868b;margin-left:6px}#experiment-magnet .m1-span{grid-column:1/-1}#experiment-magnet .m1-layers{display:flex;gap:10px 18px;flex-wrap:wrap;border-top:1px solid #ededf0;padding-top:18px;margin-top:23px;color:#6e6e73;font-size:11px}#experiment-magnet .m1-layers label{display:flex;gap:6px;align-items:center;cursor:pointer;min-height:24px}#experiment-magnet .m1-layers input{accent-color:#0066cc;width:16px;height:16px;margin:0}#experiment-magnet .m1-observation-heading{display:flex;gap:8px;align-items:center;padding:6px 2px 16px}#experiment-magnet .m1-observation-heading h2{font-size:14px;font-weight:600}#experiment-magnet .m1-observation-heading>span:last-child{margin-left:auto;color:#86868b;font-size:10px}#experiment-magnet .m1-metric{padding:23px;margin-bottom:15px}#experiment-magnet .m1-kicker{font-size:10px;color:#86868b;font-weight:600;letter-spacing:.04em;margin-bottom:9px}#experiment-magnet .m1-metric h3{font-size:17px;line-height:1.55;letter-spacing:-.5px;font-weight:600}#experiment-magnet .m1-metric>p:not(.m1-kicker){font-size:11px;color:#6e6e73;line-height:1.8;margin-top:14px}#experiment-magnet .m1-field-compare{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;text-align:center;gap:10px}#experiment-magnet .m1-field-compare>div{border-radius:12px;background:#f8faf9;padding:12px 5px}#experiment-magnet .m1-field-compare>div+div{background:#faf8fe}#experiment-magnet .m1-field-compare span{display:block;font-size:10px;color:#86868b}#experiment-magnet .m1-field-compare strong{display:block;font-size:40px;line-height:1.35;font-weight:400}#experiment-magnet .m1-field-compare small{font-size:11px;color:#6e6e73}#experiment-magnet .m1-inline-note{padding:10px;border-radius:9px;background:#f1f6fb}#experiment-magnet .m1-current-value{display:flex;gap:5px;align-items:baseline;margin-top:14px;color:#c6503b}#experiment-magnet .m1-current-value strong{font-size:37px;line-height:1.15;font-weight:600;letter-spacing:-1.7px;font-variant-numeric:tabular-nums}#experiment-magnet .m1-current-value>span:first-of-type{font-size:17px}#experiment-magnet .m1-current-value>span:last-child{font-size:10px;color:#86868b;margin-left:auto;white-space:nowrap}#experiment-magnet .m1-strength{height:5px;margin-top:15px;border-radius:4px;background:#ededf0;overflow:hidden}#experiment-magnet .m1-strength i{display:block;height:100%;width:0;background:#c6503b;border-radius:4px}#experiment-magnet .m1-inline-reading{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:15px;font-size:10px;color:#86868b}#experiment-magnet .m1-inline-reading b{font-size:11px;font-weight:600;color:#6e6e73;white-space:nowrap}#experiment-magnet .m1-section-heading h2{font-size:22px;letter-spacing:-.65px;line-height:1.4;font-weight:600}#experiment-magnet .m1-energy,#experiment-magnet .m1-compare{padding:27px 28px}#experiment-magnet .m1-section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}#experiment-magnet .m1-badge{padding:6px 9px;border-radius:7px;background:#f5f5f7;color:#86868b;font-size:10px;white-space:nowrap}#experiment-magnet .m1-energy>p,#experiment-magnet .m1-compare>p{font-size:12px;line-height:1.8;color:#6e6e73;margin-top:17px}#experiment-magnet .m1-compare{margin-top:24px}#experiment-magnet .m1-saved-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:20px}#experiment-magnet .m1-empty{grid-column:1/-1;border:1px dashed #d7d7dd;border-radius:12px;text-align:center;padding:22px;font-size:12px;color:#86868b}#experiment-magnet .m1-saved-scene{border:1px solid #e3e3e8;border-radius:12px;padding:15px;background:#fafafc}#experiment-magnet .m1-saved-scene header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}#experiment-magnet .m1-saved-scene h3{font-size:13px;font-weight:600}#experiment-magnet .m1-saved-scene button{font-size:19px;background:transparent;color:#86868b;padding:0 4px}#experiment-magnet .m1-saved-scene p{font-size:10px;color:#86868b;line-height:1.8}#experiment-magnet .m1-saved-scene strong{display:block;color:#c6503b;font-size:23px;font-weight:600;margin:12px 0 8px}#experiment-magnet .m1-saved-scene small{font-size:10px;color:#6e6e73}
@media(min-width:1600px){#experiment-magnet .m1-workspace{grid-template-columns:minmax(0,1fr) 360px;gap:28px}}@media(max-width:1100px){#experiment-magnet .m1-workspace{grid-template-columns:minmax(0,1fr) 295px;gap:18px}#experiment-magnet .m1-metric{padding:20px}#experiment-magnet .m1-settings{grid-template-columns:1fr}#experiment-magnet .m1-span{grid-column:auto}}@media(max-width:850px){#experiment-magnet .m1-workspace{grid-template-columns:1fr}#experiment-magnet .m1-observations{display:grid;grid-template-columns:1fr 1fr;gap:16px}#experiment-magnet .m1-observation-heading{grid-column:1/-1;padding-bottom:0}#experiment-magnet .m1-metric{margin:0}#experiment-magnet .m1-settings{grid-template-columns:1fr 1fr}#experiment-magnet .m1-span{grid-column:1/-1}}@media(max-width:560px){#experiment-magnet .card-heading{padding:22px 20px 19px}#experiment-magnet .card-heading h2{font-size:20px}#experiment-magnet .m1-stage{margin:0 8px}#experiment-magnet .m1-stage-hint{font-size:9px;right:12px;top:10px}#experiment-magnet .m1-controls{padding:20px}#experiment-magnet .m1-legend{padding:12px 20px 3px;gap:8px 12px;font-size:9px}#experiment-magnet .m1-settings{grid-template-columns:1fr;gap:18px}#experiment-magnet .m1-span{grid-column:auto}#experiment-magnet .m1-choices button{padding:10px 5px;font-size:11px}#experiment-magnet .m1-actions button{font-size:11px;padding:10px 12px}#experiment-magnet .m1-actions #m1-reset{margin-left:0}#experiment-magnet .m1-observations{grid-template-columns:1fr}#experiment-magnet .m1-energy,#experiment-magnet .m1-compare{padding:23px 20px}#experiment-magnet .m1-section-heading h2{font-size:20px}#experiment-magnet .m1-section-heading{align-items:flex-start;flex-wrap:wrap;gap:12px}#experiment-magnet .m1-saved-scenes{grid-template-columns:1fr}}

/* Permit page scrolling around the figure{touch-action:none}
@media(max-width:560px){}

/* Point-based observation: pause at q/r and read one moment at a time. */
#experiment-magnet .m1-point-selector{padding-bottom:22px;margin-bottom:23px;border-bottom:1px solid #ededf0}
#experiment-magnet .m1-point-selector .m1-range-label strong{font-size:12px;font-weight:500;color:#6e6e73;text-align:right}
#experiment-magnet .m1-point-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:13px 0 10px}
#experiment-magnet .m1-point-buttons button{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 10px;background:#fff;border:1px solid #c9c9d1;border-radius:10px;min-height:49px}
#experiment-magnet .m1-point-buttons b{font:italic 600 22px Georgia,serif;line-height:1}
#experiment-magnet .m1-point-buttons span{font-size:11px;line-height:1.4}
#experiment-magnet .m1-point-buttons button:hover{background:#f0f6ff;border-color:#6ea3d7}
#experiment-magnet .m1-point-buttons button[aria-pressed=true]{color:#fff;background:#0066cc;border-color:#0066cc}
#experiment-magnet .m1-answer{display:block;font-size:14px;font-weight:600;line-height:1.7;color:#28845d;margin-top:18px}
#experiment-magnet .m1-interaction{padding-top:14px;border-top:1px solid #ededf0}
#experiment-magnet .m1-interaction b{color:#b57429;font-size:12px;white-space:normal;text-align:right}
#experiment-magnet .m1-current-value{display:block;margin-top:19px}
#experiment-magnet .m1-current-value strong{font-size:23px;line-height:1.55;font-weight:600;letter-spacing:-.6px}
#experiment-magnet .m1-current-value>span:last-child{display:block;font-size:11px;margin-top:7px;color:#86868b}
#experiment-magnet .m1-waiting{padding:29px 24px;min-height:250px;text-align:center;background:#fafcff}
#experiment-magnet .m1-waiting-symbol{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 19px;border-radius:50%;color:#0071e3;background:#edf5ff;font-size:26px}
#experiment-magnet .m1-waiting h3{font-size:18px;font-weight:600;line-height:1.6;letter-spacing:-.45px}
#experiment-magnet .m1-waiting p{font-size:12px;color:#6e6e73;line-height:1.85;margin-top:13px}
#experiment-magnet .m1-energy{margin-top:24px}
#experiment-magnet .m1-energy-comparison{font-weight:600;color:#0071e3!important}
#experiment-magnet .m1-saved-scene strong{font-size:17px;line-height:1.6;letter-spacing:-.3px;margin:14px 0 5px}
#experiment-magnet .m1-saved-scene small{display:block;line-height:1.9;margin-top:11px}
@media(max-width:850px){#experiment-magnet .m1-observations{display:block}#experiment-magnet .m1-observation-heading{margin:10px 0 15px}#experiment-magnet .m1-inquiry-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}#experiment-magnet .m1-waiting{min-height:0;padding:26px}}
@media(max-width:560px){#experiment-magnet .m1-inquiry-cards{grid-template-columns:1fr}#experiment-magnet .m1-point-buttons{gap:7px}#experiment-magnet .m1-point-buttons button{padding:11px 7px;gap:7px}#experiment-magnet .m1-point-buttons b{font-size:20px}#experiment-magnet .m1-point-buttons span{font-size:10px}#experiment-magnet .m1-point-selector .m1-range-label strong{font-size:11px}}
#experiment-magnet .m1-point-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
#experiment-magnet .m1-point-buttons button{gap:7px;padding:11px 8px}
#experiment-magnet .m1-energy-compare{display:grid;gap:9px;margin-top:24px}
#experiment-magnet .m1-energy-compare>div{display:grid;grid-template-columns:47px minmax(0,1fr) 80px;align-items:center;gap:15px;padding:12px;border:1px solid transparent;border-radius:10px;color:#86868b}

#experiment-magnet .m1-energy-compare>div>span{font-size:12px;font-weight:600}
#experiment-magnet .m1-energy-compare>div>div{height:8px;border-radius:5px;background:#ededf1;overflow:hidden}
#experiment-magnet .m1-energy-compare i{display:block;height:100%;border-radius:5px;background:#c6503b;width:0;transition:width .15s linear}
#experiment-magnet .m1-energy-compare b{text-align:right;font-size:11px;font-weight:500}
@media(max-width:560px){#experiment-magnet .m1-point-buttons{gap:7px}#experiment-magnet .m1-point-buttons button{display:flex;flex-direction:column;gap:5px;padding:10px 5px}#experiment-magnet .m1-energy-compare>div{grid-template-columns:35px minmax(0,1fr) 65px;gap:10px;padding:11px 8px}#experiment-magnet .m1-energy-compare b{font-size:10px}}

#experiment-magnet .m1-speed-setting{margin:0 0 24px}#experiment-magnet .m1-speed-setting legend{font-size:13px}#experiment-magnet .m1-speed-setting .m1-choices button{font-size:14px;min-height:48px}

#experiment-magnet .m1-speed-setting>p{margin-top:9px}
#experiment-magnet .m1-energy-compare>div{grid-template-columns:66px minmax(0,1fr) 80px}
@media(max-width:560px){#experiment-magnet .m1-energy-compare>div{grid-template-columns:58px minmax(0,1fr) 65px}}

/* The q–r interior suppresses the meter reading, without representing it as zero. */
#experiment-magnet #m1-gauge-card[hidden],#experiment-magnet #m1-current-strength-wrap[hidden]{display:none!important}

/* Put the transport controls next to the diagram, before point selection. */
#experiment-magnet .m1-transport{padding-bottom:20px;margin-bottom:23px;border-bottom:1px solid #ededf0}
#experiment-magnet .m1-transport .m1-actions{margin-top:0}

/* Saved snapshots share the live instrument's fixed calibration. */
#experiment-magnet .m1-saved-meter{margin-top:8px}
#experiment-magnet .m1-saved-meter>svg{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
#experiment-magnet .m1-saved-strength{height:6px;margin:2px 0 11px;overflow:hidden;border-radius:5px;background:#e5e7eb}
#experiment-magnet .m1-saved-strength i{display:block;height:100%;border-radius:5px;background:#c6503b}
#experiment-magnet .m1-saved-scene .m1-saved-percentage{font-size:17px;line-height:1.5;font-weight:600;color:#c6503b;letter-spacing:-.35px;font-variant-numeric:tabular-nums}
@media(max-width:560px){#experiment-magnet .m1-saved-meter>svg{max-width:235px}#experiment-magnet .m1-saved-scene .m1-saved-percentage{font-size:18px}}

#experiment-magnet .m1-model-note{margin-top:25px;color:#86868b;font-size:11px;line-height:1.85;padding:0 3px}#experiment-magnet .m1-model-note summary{cursor:pointer;color:#6e6e73}#experiment-magnet .m1-model-note p{margin-top:10px;max-width:920px}

/* Make returning to the start an explicit, labelled action. */
#experiment-magnet .m1-actions .m1-reset-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-left:auto;white-space:nowrap}
#experiment-magnet .m1-reset-button>span:first-child{font-size:19px;line-height:1}
@media(max-width:560px){#experiment-magnet .m1-actions .m1-reset-button{margin-left:0}}