@import "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";html{background:#f3f2ed}:root{--ink:#101a23;--muted:#64717c;--line:#cdd2d5;--paper:#f3f2ed;--red:#e33d32;--blue:#2679ae;--gold:#c99b35}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--ink);background:var(--paper);margin:0;font-family:Archivo,sans-serif;overflow:hidden}button,input{font:inherit}.app-shell{border:1px solid var(--ink);background:var(--paper);grid-template-rows:78px minmax(0,1fr) 42px;width:100vw;height:100vh;display:grid}.topbar{border-bottom:1px solid var(--ink);background:#f6f5f0f5;grid-template-columns:76px 1fr auto;display:grid}.brand-mark{border-right:1px solid var(--ink);place-items:center;display:grid}.brand-mark img{object-fit:cover;border-radius:14px;width:50px;height:50px;display:block;box-shadow:0 1px 5px #0a162833}.brand-copy{align-self:center;padding-left:22px}.eyebrow,.meta-label,.panel-heading,.control-label,.range-labels,.legend,.tip span,.statusbar,.stage-instruction,.axis-label{letter-spacing:.11em;font-family:IBM Plex Mono,monospace}.eyebrow{color:var(--red);margin-bottom:5px;font-size:9px;font-weight:600}h1{letter-spacing:-.04em;margin:0;font-size:21px;line-height:1}h1 span{color:#9aa1a6;padding:0 4px;font-weight:400}.header-meta{align-items:stretch;display:flex}.header-meta>div{border-left:1px solid var(--line);min-width:145px;padding:17px 25px}.header-meta strong{margin-top:7px;font-family:IBM Plex Mono,monospace;font-size:12px;display:block}.meta-label{color:var(--muted);font-size:8px}.status{color:#287b52}.status.paused{color:var(--gold)}.status i{width:6px;height:6px;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 13%,transparent);background:currentColor;border-radius:50%;margin-right:7px;display:inline-block}.workspace{grid-template-columns:300px minmax(0,1fr);min-height:0;display:grid}.control-panel{border-right:1px solid var(--ink);background-color:#f1f0eb;background-image:radial-gradient(#c6c5bf .55px,#0000 .55px);background-size:7px 7px;padding:20px 22px 14px;overflow:auto}.panel-heading{justify-content:space-between;align-items:center;margin-bottom:26px;font-size:10px;font-weight:600;display:flex}.panel-heading small{color:#90979b;font-size:8px}.control{margin-bottom:23px;display:block}.control-label{justify-content:space-between;align-items:baseline;margin-bottom:12px;font-size:8px;font-weight:600;display:flex}.control-label output{color:var(--red);font-size:11px}input[type=range]{appearance:none;background:linear-gradient(90deg,var(--red) var(--fill),#b7bdc0 var(--fill));outline:none;width:100%;height:2px;margin:7px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--red);width:13px;height:13px;box-shadow:0 0 0 1px var(--red),0 1px 4px #0004;cursor:ew-resize;border:2px solid #fff;border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--red);width:10px;height:10px;box-shadow:0 0 0 1px var(--red);cursor:ew-resize;border:2px solid #fff;border-radius:50%}.range-labels{color:#848c91;justify-content:space-between;margin-top:5px;font-size:7px;display:flex}.color-control{letter-spacing:.11em;justify-content:space-between;align-items:center;margin-bottom:16px;font:600 8px IBM Plex Mono,monospace;display:flex}.color-control>div{align-items:center;gap:8px;display:flex}.color-control input[type=color]{border:1px solid var(--ink);cursor:pointer;background:0 0;width:28px;height:22px;padding:1px}.color-control output{width:54px;color:var(--muted);letter-spacing:.04em;font-size:8px}.divider{border-top:1px solid var(--line);margin:4px 0 18px}.button-stack{gap:9px;display:grid}.button-stack button{border:1px solid var(--ink);letter-spacing:.08em;cursor:pointer;height:38px;font-family:IBM Plex Mono,monospace;font-size:9px;font-weight:600;transition:transform .15s,box-shadow .15s}.button-stack button:hover{box-shadow:2px 2px 0 var(--ink);transform:translateY(-1px)}.button-stack span{margin-right:10px;font-size:11px;display:inline-block}.primary-button{color:#fff;background:var(--ink)}.secondary-button{color:var(--ink);background:0 0}.polarity-button{color:#fff;background:var(--blue);border-color:var(--blue)!important}.polarity-button.repelling{background:var(--red);border-color:var(--red)!important}.pulse-button{color:var(--ink);background:#e6bd54;border-color:#a87918!important}.preset-panel{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.preset-heading{color:#68747a;letter-spacing:.11em;margin-bottom:10px;font:600 8px IBM Plex Mono,monospace}.preset-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.preset-grid button{color:#465159;letter-spacing:.04em;cursor:pointer;background:#ffffff61;border:1px solid #aeb5b8;min-height:32px;padding:6px;font:600 7px IBM Plex Mono,monospace}.preset-grid button:hover{color:var(--ink);border-color:var(--ink);background:#fff}.legend{border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#5f696f;grid-template-columns:1fr 1fr;gap:12px 8px;margin:21px 0;padding:18px 0;font-size:7px;display:grid}.legend div{align-items:center;gap:7px;display:flex}.legend i{border-radius:50%;flex:none;width:8px;height:8px}.legend .north{background:var(--red)}.legend .south{background:var(--blue)}.legend .iron{background:#1f2d35}.legend .field{background:var(--gold);border-radius:0;height:2px}.tip{border-left:2px solid var(--gold);padding:2px 0 2px 12px}.tip span{color:var(--gold);margin-bottom:5px;font-size:8px;font-weight:600;display:block}.tip p{color:#626c72;margin:0;font-size:10px;line-height:1.45}.stage-wrap{background:#dddcd5;min-width:0;min-height:0;position:relative;overflow:hidden}.simulation-canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.simulation-canvas.dragging{cursor:grabbing}.stage-wrap:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 80px #11191f1f}.stage-instruction{z-index:2;color:#58636a;white-space:nowrap;background:#f3f2eddb;border:1px solid #aeb4b7;padding:7px 12px;font-size:7px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.mouse-icon{color:var(--red);margin-right:7px;font-size:11px}.axis-label{z-index:2;transform-origin:0 0;color:#7d8589;font-size:7px;position:absolute;top:50%;left:8px;transform:rotate(-90deg)translate(-50%)}.north-indicator{z-index:2;color:var(--red);justify-items:center;font-family:IBM Plex Mono,monospace;font-size:10px;display:grid;position:absolute;top:17px;right:17px}.north-indicator span{background:linear-gradient(var(--red) 55%,var(--ink) 55%);width:1px;height:20px;margin-top:3px}.magnet-toolbar{z-index:4;background:#f3f2ede6;border:1px solid #9ea7ab;align-items:center;gap:5px;padding:6px;display:flex;position:absolute;top:14px;left:14px;box-shadow:0 3px 14px #141e261a}.magnet-toolbar>span{color:#59666c;letter-spacing:.08em;padding:0 7px;font:600 7px IBM Plex Mono,monospace}.magnet-toolbar button{color:#344149;letter-spacing:.04em;cursor:pointer;background:#f8f7f2;border:1px solid #aeb5b8;height:25px;padding:0 8px;font:600 7px IBM Plex Mono,monospace}.magnet-toolbar button:hover{color:#fff;background:var(--ink);border-color:var(--ink)}.field-probe{z-index:5;color:#354148;letter-spacing:.05em;pointer-events:none;background:#f9f6ebf0;border:1px solid #a9791d;gap:3px;min-width:178px;padding:9px 10px;font:7px IBM Plex Mono,monospace;display:grid;position:absolute;box-shadow:0 4px 18px #19222824}.field-probe b{color:#b17810;letter-spacing:.12em;margin-bottom:3px;font-size:8px}.fx-status{z-index:3;color:#546169;letter-spacing:.1em;pointer-events:none;background:#f3f2ede0;border:1px solid #aeb4b7;max-width:280px;padding:7px 10px;font:7px IBM Plex Mono,monospace;position:absolute;bottom:16px;right:16px}.statusbar{border-top:1px solid var(--ink);background:#f5f4ef;align-items:stretch;font-size:7px;display:flex}.statusbar>div{border-right:1px solid var(--line);min-width:118px;padding:8px 17px}.statusbar span{color:#8a9297;font-size:6px;display:block}.statusbar strong{margin-top:3px;font-size:7px;display:block}.statusbar .coordinates{margin-left:auto}.statusbar .signature{border-left:1px solid var(--line);color:#6d767b;text-align:right;border-right:0}.signature span{color:var(--red);display:inline}@media (width<=820px){.app-shell{grid-template-rows:64px minmax(0,1fr) 38px}.topbar{grid-template-columns:60px 1fr}.header-meta{display:none}.workspace{grid-template-columns:220px minmax(0,1fr)}.control-panel{padding:16px 14px}.legend{grid-template-columns:1fr}.statusbar>div:nth-child(n+4){display:none}}@media (width<=600px){body{overflow:auto}.app-shell{grid-template-rows:64px auto 38px;height:auto;min-height:100vh}h1{font-size:16px}.workspace{flex-direction:column-reverse;display:flex}.stage-wrap{height:58vh;min-height:400px}.control-panel{border-right:0;border-top:1px solid var(--ink)}.legend{grid-template-columns:1fr 1fr}}