@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e9eef2;background:#101924;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}.topbar{height:64px;border-bottom:1px solid #273440;display:flex;align-items:center;justify-content:space-between;padding:0 27px;background:#111b27}.brand{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.8px;display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#b9ec74;color:#172014;font-size:22px}.beta{font:500 10px 'DM Mono';color:#b9ec74;text-transform:uppercase;letter-spacing:1.5px;border:1px solid #466337;border-radius:4px;padding:4px 5px;margin-left:2px}.top-actions{display:flex;align-items:center;gap:16px}.save-state{color:#7e929e;font-size:12px}.ghost{background:transparent;color:#bbcbd3;border:1px solid #394956;border-radius:7px;padding:8px 12px}.ghost:hover,.icon-button:hover{border-color:#b9ec74;color:#b9ec74}.workspace{display:grid;grid-template-columns:326px minmax(0,1fr);min-height:calc(100vh - 64px)}.sidebar{background:#16212d;border-right:1px solid #2b3944;padding:24px 20px;overflow-y:auto;max-height:calc(100vh - 64px)}.section-heading,.subheading,.canvas-header{display:flex;justify-content:space-between;align-items:center}.eyebrow{font:500 10px 'DM Mono';letter-spacing:1.8px;color:#8fa0ac}.section-heading h1,.canvas-header h2,.readout h2,.simulation h2{font-family:'Space Grotesk';font-size:21px;letter-spacing:-.5px;margin:6px 0 0}.icon-button{width:32px;height:32px;border:1px solid #41515e;background:#1d2c38;border-radius:8px;color:#d9e3e9;font-size:23px;line-height:1}.body-list{display:flex;flex-direction:column;gap:7px;margin:22px 0}.body-item{display:flex;align-items:center;gap:9px;width:100%;padding:10px 11px;border:1px solid #334450;background:#1b2a36;border-radius:9px;text-align:left;color:#c6d4db}.body-item.active{border-color:#b9ec74;background:#263a35;color:#edf7e7}.body-symbol{height:19px;width:19px;border-radius:5px;background:#b9ec74}.body-item small{margin-left:auto;color:#94a5ac;font:11px 'DM Mono'}.editor,.forces-panel{border-top:1px solid #30404c;padding-top:18px;margin-top:17px}.editor-title{font-family:'Space Grotesk';font-weight:600;font-size:15px;margin:0 0 14px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:flex;flex-direction:column;gap:6px;color:#91a5ae;font-size:11px}.field.full{grid-column:1/-1}.field input{min-width:0;width:100%;border:1px solid #3a4b58;border-radius:7px;padding:9px;background:#111d27;color:#f0f4f3;outline:none}.field input:focus{border-color:#b9ec74}.field .unit{position:relative}.field .unit::after{content:attr(data-unit);position:absolute;right:9px;top:9px;color:#78909b;font:11px 'DM Mono';pointer-events:none}.field .unit input{padding-right:28px}.subheading h2{font-family:'Space Grotesk';font-size:15px;margin:0}.text-button{border:0;background:none;color:#b9ec74;font-size:12px;padding:4px}.force-card{border:1px solid #334550;border-radius:9px;background:#1b2a36;padding:11px;margin-top:11px}.force-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}.force-swatch{width:9px;height:9px;border-radius:50%;background:var(--force-color)}.force-name{flex:1;background:transparent;border:0;color:#e7eeef;min-width:0;font-weight:600;outline:none}.remove-force,.remove-body{background:none;border:0;color:#8da1aa;font-size:18px;padding:0 3px}.remove-force:hover,.remove-body:hover{color:#ff9f89}.remove-body{margin-top:13px;font-size:12px}.sidebar-note,.sim-note{font-size:11px;line-height:1.5;color:#8296a1;margin:20px 1px}.main-panel{min-width:0;padding:23px 26px 28px;background:#101924}.canvas-header{margin-bottom:17px}.toggle{display:flex;align-items:center;gap:9px;font-size:12px;color:#cbd7da;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle span{width:29px;height:17px;border-radius:10px;background:#4d5b63;position:relative}.toggle span:after{content:'';position:absolute;width:11px;height:11px;background:white;top:3px;left:3px;border-radius:50%;transition:transform .2s}.toggle input:checked+span{background:#9ece67}.toggle input:checked+span:after{transform:translateX(12px)}.diagram-wrap{position:relative;background:#172430;border:1px solid #30414b;border-radius:14px;overflow:hidden;height:min(49vh,500px);min-height:330px}.diagram-wrap svg{width:100%;height:100%;display:block}.canvas-caption{position:absolute;bottom:15px;left:18px;font:11px 'DM Mono';color:#9badb4;background:#172430d9;padding:6px 9px;border-radius:5px}.live-dot{display:inline-block;height:6px;width:6px;border-radius:50%;background:#b9ec74;margin-right:6px}.caption-divider{padding:0 5px;color:#627985}.bottom-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:15px;margin-top:16px}.readout,.simulation{background:#16232f;border:1px solid #2d3e4b;border-radius:12px;padding:19px}.readout-title h2{font-size:18px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.metric{background:#1e2e3b;border:1px solid #30414b;border-radius:8px;padding:11px;min-width:0}.metric-label{display:block;color:#8da2ad;font-size:10px;margin-bottom:7px}.metric-value{display:block;font:500 16px 'DM Mono';color:#edf5ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-value.accent{color:#b9ec74}.equations{border-top:1px solid #30414b;padding-top:12px;font:12px/1.85 'DM Mono';color:#aebfc7}.equations b{color:#e5eef0;font-weight:500}.sim-scene{height:150px;margin-top:13px;border:1px solid #30414b;border-radius:8px;background:#15222d;overflow:hidden}.sim-scene svg{width:100%;height:100%}.transport{display:flex;align-items:center;gap:9px;margin-top:13px}.play-button{background:#b9ec74;color:#172318;border:0;border-radius:7px;padding:9px 14px;font-weight:700;min-width:82px}.play-button:hover{background:#d0f79d}.small{padding:8px 11px}.time{margin-left:auto;font:12px 'DM Mono';color:#b9ec74}.sim-note{margin:12px 0 0}@media(max-width:1050px){.bottom-grid{grid-template-columns:1fr}.diagram-wrap{height:420px}}@media(max-width:730px){.workspace{grid-template-columns:1fr}.sidebar{max-height:none;border-right:0;border-bottom:1px solid #2b3944}.main-panel{padding:20px 14px}.topbar{padding:0 14px}.save-state{display:none}.diagram-wrap{height:350px;min-height:300px}.metrics{grid-template-columns:repeat(2,1fr)}.canvas-caption{font-size:9px}}
.add-control{position:relative}.add-menu{position:absolute;right:0;top:39px;z-index:5;width:165px;background:#233440;border:1px solid #577080;box-shadow:0 12px 28px #07111abb;border-radius:9px;padding:5px}.add-menu[hidden]{display:none}.add-menu button{display:block;width:100%;text-align:left;background:none;color:#e8f1ee;border:0;border-radius:6px;padding:10px;font-size:12px}.add-menu button:hover,.add-menu button:focus{background:#334c52}.object-row{display:flex;align-items:center;border:1px solid #334450;background:#1b2a36;border-radius:9px;overflow:hidden}.object-row.active{border-color:#b9ec74;background:#263a35}.object-select{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:10px 11px;border:0;background:transparent;color:#c6d4db;text-align:left}.object-row.active .object-select{color:#edf7e7}.object-select small{margin-left:auto;color:#94a5ac;font:11px 'DM Mono'}.object-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.surface-symbol{width:20px;height:5px;border-radius:2px;transform:rotate(-12deg);background:#84a7b4}.object-delete{border:0;background:transparent;color:#8da1aa;font-size:20px;padding:7px 10px;line-height:1}.object-delete:hover,.object-delete:focus{color:#ff9f89;background:#3b3137}.text-button:disabled{opacity:.4;cursor:not-allowed}
/* Let the simulation occupy a full square without stretching the calculations card. */
.bottom-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:start}
.sim-scene{width:100%;height:auto;aspect-ratio:1/1;max-width:680px;margin:13px auto 0}
.sim-scene svg{display:block;width:100%;height:100%}
@media(max-width:1300px){.bottom-grid{grid-template-columns:1fr}.simulation{max-width:760px}}
#diagram{touch-action:none}
.diagram-draggable{cursor:grab}
.diagram-draggable:active{cursor:grabbing}
.mode-control{display:flex;align-items:center;gap:18px}
.gravity-field{display:flex;align-items:center;gap:6px;color:#cbd7da;font:12px 'DM Mono'}
.gravity-field input{width:70px;padding:6px 7px;background:#111d27;border:1px solid #3a4b58;border-radius:6px;color:#edf5ee;font:12px 'DM Mono';text-align:right}
.gravity-field input:focus{outline:none;border-color:#b9ec74}
.gravity-field span{color:#8fa0ac}
.simulation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.view-control{position:relative}
.view-menu{position:absolute;right:0;top:38px;z-index:10;width:236px;padding:13px;background:#21323e;border:1px solid #577080;border-radius:9px;box-shadow:0 12px 28px #07111abb}
.view-menu[hidden]{display:none}
.view-menu strong{display:block;font-size:12px;margin-bottom:10px}
.view-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.view-fields label{display:flex;flex-direction:column;gap:5px;color:#a9bac1;font-size:11px}
.view-fields input{width:100%;padding:7px;background:#111d27;border:1px solid #3a4b58;border-radius:6px;color:#edf5ee;font:12px 'DM Mono'}
.view-fields input:focus{outline:none;border-color:#b9ec74}
#resetView{margin-top:12px;padding:6px 0;border:0;background:none;color:#b9ec74;font-size:12px}
.sim-scene{position:relative}
#viewHandle{position:absolute;right:0;bottom:0;width:28px;height:28px;padding:0;border:1px solid #55707b;border-right:0;border-bottom:0;border-radius:7px 0 0 0;background:#263c48;color:#b9ec74;font-size:19px;line-height:1;cursor:nwse-resize;touch-action:none}
#viewHandle:hover,#viewHandle:focus{background:#355260;outline:none}