body{margin:0;background:#101c35}#magnet-mayhem{box-sizing:border-box;max-width:680px;margin:auto;padding:14px;background:#152440;color:#f8edcd;font:15px system-ui}#magnet-mayhem *{box-sizing:border-box}#magnet-mayhem header{display:flex;align-items:center;justify-content:space-between;gap:10px}#magnet-mayhem h1{font-size:30px;margin:5px 0 14px;letter-spacing:-1px}#magnet-mayhem h1 span{color:#8fe9d2}#magnet-mayhem small{font-size:10px;letter-spacing:1px;color:#b5d9e3}#magnet-mayhem button{min-height:46px;border:1px solid #64839a;border-radius:11px;background:#304762;color:#ecf6ef;font:800 14px system-ui;padding:9px 14px;touch-action:none;user-select:none}#magnet-mayhem button:focus-visible{outline:3px solid #ffe29c;outline-offset:3px}#magnet-mayhem .primary{background:#9be8d0;color:#153941;border-color:#c8f4df}#magnet-mayhem .stats{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 4px 13px}#magnet-mayhem .stats span{display:flex;flex-direction:column;gap:3px}#magnet-mayhem b{font-size:24px;font-variant-numeric:tabular-nums}#magnet-mayhem .polarity{font-size:13px;font-weight:900;color:#ffd18d}#magnet-mayhem .stage{position:relative;border:3px solid #cdb98d;border-radius:20px;overflow:hidden}#magnet-mayhem canvas{display:block;width:100%;aspect-ratio:600/650;touch-action:none}#magnet-mayhem #message{position:absolute;top:8px;left:10px;right:10px;text-align:center;background:#10223ddc;color:#d5efe7;font-size:11px;font-weight:800;padding:7px;border-radius:6px;pointer-events:none}#magnet-mayhem #overlay{position:absolute;inset:0;display:grid;place-items:center;background:#111c35b8;padding:22px}#magnet-mayhem #overlay[hidden]{display:none}#magnet-mayhem #overlay section{padding:24px;max-width:410px;text-align:center;background:#1c3651;border:1px solid #719096;border-radius:18px}#magnet-mayhem h2{font-size:36px;margin:10px 0;line-height:1.1;letter-spacing:-1px}#magnet-mayhem p{color:#cee1df;line-height:1.6}#magnet-mayhem .controls{display:flex;gap:8px;margin-top:12px}#magnet-mayhem .controls>button{flex:1}#magnet-mayhem .controls #pull{flex:3}#magnet-mayhem .vertical{display:flex;flex-direction:column;gap:5px;flex:1}#magnet-mayhem .vertical button{padding:4px;min-height:36px}#magnet-mayhem #pull small{color:#285b60;font-size:9px}#magnet-mayhem .hint{text-align:center;font-size:12px;margin:12px 0 0}@media(max-width:450px){#magnet-mayhem{padding:8px}#magnet-mayhem h1{font-size:25px}#magnet-mayhem .stats{gap:6px}#magnet-mayhem b{font-size:22px}#magnet-mayhem #overlay section{padding:18px}#magnet-mayhem h2{font-size:29px}#magnet-mayhem .controls{gap:5px}#magnet-mayhem .controls button{padding:8px}#magnet-mayhem .vertical button{min-height:44px}}