:root{--bg-color: #ffffff;--text-color: #000000;--accent-color: #0000ff;--font-serif: "Times New Roman", Times, serif;--font-mono: "Courier New", Courier, monospace}body{background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-serif);margin:0;padding:25px 50px;line-height:1.6}a{color:var(--accent-color);text-decoration:none}a:hover{text-decoration:underline}nav{margin-bottom:25px}nav ul{list-style-type:disc;padding-left:20px;margin:0}nav li{font-size:1.2rem;margin-bottom:5px}nav a{color:var(--text-color);font-family:var(--font-serif);font-weight:400}nav a:hover{color:var(--accent-color);text-decoration:none}.main-text{font-size:1.6rem;font-weight:500;font-family:var(--font-serif);margin-top:20px;margin-left:50px}.highlight{color:var(--accent-color);font-style:italic;font-weight:700}.logo{font-family:var(--font-mono);font-size:2.5rem;font-weight:700;text-transform:uppercase}.footer-text{font-size:.9rem;margin-top:50px;padding-top:15px;border-top:1px solid var(--text-color);width:fit-content}.container{max-width:1200px;margin:0 auto}.site-header{position:sticky;top:0;background-color:var(--bg-color);margin:-25px -50px 20px;padding:10px 50px;border-bottom:1px solid var(--text-color);z-index:100}.site-header a{font-family:Arial,Helvetica,sans-serif;font-size:1rem;font-weight:700;color:var(--accent-color);text-transform:uppercase;letter-spacing:3px}.site-header a:hover{text-decoration:underline}h1{font-family:var(--font-serif);font-size:2.5rem;font-weight:700;font-style:italic;margin-bottom:30px;border-bottom:1px solid var(--text-color);padding-bottom:10px;max-width:800px}h3{margin-top:0;font-family:var(--font-serif);font-size:1.1rem;font-weight:700}.demo-section{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;margin-bottom:40px;padding-bottom:30px;border-bottom:1px dashed var(--text-color)}.demo-section:last-of-type{border-bottom:none}.controls{border:1px solid var(--text-color);padding:15px;width:320px;flex-shrink:0}.canvas-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:flex-start}.canvas-stack{display:flex;flex-direction:column;align-items:center;width:min(600px,100%)}.canvas-stack>canvas{width:100%;height:auto}.canvas-stack>.code-display{width:100%}canvas{border:1px solid var(--text-color);background-color:#fff;max-width:100%}.control-group{margin-bottom:10px;padding-bottom:8px;border-bottom:1px dotted #999}.control-header{display:flex;justify-content:space-between;margin-bottom:5px;font-size:.9rem}.val-display{font-family:var(--font-mono);color:var(--accent-color)}input[type=range]{width:100%;cursor:pointer}.code-display{background:#f5f5f5;border:1px solid var(--text-color);border-left:3px solid var(--accent-color);padding:10px;font-family:var(--font-mono);font-size:.7rem;color:var(--text-color);line-height:1.4;margin-top:12px;white-space:pre-wrap;overflow-x:auto}.comment{color:#666;font-style:italic}.var{color:var(--text-color)}.func{color:var(--accent-color)}.num{color:#333}.vmc-blue{color:#00f}.contact-purple{color:#a0f}.torque-orange{color:#e68a00}.gravity-gray{color:#777}.state-red{color:red}.target-green{color:#0f0}.total-black{color:#000}.control-group.vmc-blue label{color:#00f}.control-group.contact-purple label{color:#a0f}.control-group.torque-orange label{color:#e68a00}.control-group.gravity-gray label{color:#777}.control-group.total-black label{color:#000}.control-group.contact-purple .val-display{color:#a0f}.control-group.torque-orange .val-display{color:#e68a00}.control-group.gravity-gray .val-display{color:#777}.control-group.total-black .val-display{color:#000}.preset-btn{background:var(--bg-color);border:1px solid var(--text-color);color:var(--text-color);padding:3px 8px;margin:2px;cursor:pointer;font-family:var(--font-mono);font-size:.75rem}.preset-btn:hover{background:var(--text-color);color:var(--bg-color)}.project-preview{margin-top:8px;margin-left:0}.project-preview img{display:block;max-width:300px;border:2px solid var(--text-color);margin-bottom:8px}.project-preview small{display:block;max-width:300px;line-height:1.4}.contact-footer{margin-top:300px;margin-left:0;position:relative;display:inline-block}.contact-footer:before{content:"";position:absolute;background-color:#0f0;top:5px;bottom:5px;left:10px;right:10px;z-index:-1}.contact-footer a{display:block;color:var(--text-color);font-family:var(--font-serif);font-size:.85rem;letter-spacing:.3em;text-transform:lowercase;margin-bottom:5px;padding:2px 0}.contact-footer a:last-child{margin-bottom:0}.contact-footer a:hover{text-decoration:underline}.mpc-toolbar{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:baseline;margin-bottom:12px}.mpc-sim-title{margin:0 0 14px;font-family:var(--font-serif);font-size:1.6rem;font-weight:700;font-style:italic}.mpc-mode-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.preset-btn.mpc-active{background:var(--text-color);color:var(--bg-color)}.mpc-canvas-container{position:relative;width:100%;max-width:900px;height:420px;overflow:hidden;cursor:crosshair}@media(max-width:700px){.mpc-canvas-container{height:320px}}.mpc-canvas-container canvas{width:100%;height:100%;max-width:none}.mpc-hud{position:absolute;top:10px;left:10px;pointer-events:none}.mpc-hud-box{background:#ffffffe6;border:1px solid var(--text-color);padding:8px 10px;font-family:var(--font-mono);font-size:.75rem}.mpc-hint{position:absolute;left:10px;right:10px;bottom:10px;pointer-events:none;text-align:center}.mpc-hint span{display:inline-block;background:#ffffffe6;border:1px solid var(--text-color);padding:6px 10px;font-size:.85rem}.mpc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;margin-bottom:6px}.mpc-code-display{max-height:260px;overflow:auto}.mpc-layout{flex-wrap:nowrap;align-items:flex-start}.mpc-layout .canvas-wrapper{flex:1 1 0;min-width:0}.mpc-stage{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:stretch}
