Michelson Morley

by Chantal Roth

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Michelson–Morley (2D) - LET Consistent</title>
<style>
  :root{ --bg:#0e0e13; --ink:#eaeaf2; --muted:#a8b1c3; --panel:#14151d; --line:#5a6b9c; }
  html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink); font:14px/1.45 system-ui,Segoe UI,Roboto,Arial; }
  #wrap{ display:grid; grid-template-columns: 1.35fr 420px; height:100%; }
  #stage{ position:relative; }
  #cv{ width:100%; height:100%; display:block; background: radial-gradient(1200px 700px at 60% 40%, #1a1b27 0%, #0e0e13 60%); }
  #ui{ background:var(--panel); border-left:1px solid #232432; display:flex; flex-direction:column; overflow:auto; }
  .title{ position:absolute; right:12px; top:10px; padding:6px 10px; background:#191b24; border:1px solid #2b2e3f; border-radius:6px; color:#b9c2d6; font-size:13px; pointer-events:none; }
  
  /* Info Button */
  #infoBtn { position:absolute; right:12px; top:50px; width:24px; height:24px; border-radius:50%; border:1px solid #5a6b9c; background:#191b24; color:#dbe6ff; cursor:pointer; font-weight:bold; display:grid; place-items:center; transition:0.2s; }
  #infoBtn:hover { background:#dbe6ff; color:#0e0e13; border-color:#dbe6ff; }

  /* Modal */
  #modalOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(2px); z-index:100; align-items:center; justify-content:center; }
  #modal { width:600px; max-height:85vh; background:#191b24; border:1px solid #3b3e54; border-radius:8px; padding:24px; overflow-y:auto; box-shadow:0 20px 50px #000; position:relative; }
  #closeModal { position:absolute; top:12px; right:12px; background:none; border:none; color:#5a6b9c; font-size:20px; cursor:pointer; }
  #closeModal:hover { color:#fff; }
  
  /* Math Content */
  h2 { margin:0 0 16px; color:#fff; font-size:18px; border-bottom:1px solid #333; padding-bottom:8px; }
 ...