#menuBtn{

        position: fixed;

        top: 20px;
        left: 20px;

        z-index: 20;

        width: auto;
        padding: 12px 18px;

        border: none;
        border-radius: 14px;

        background: rgba(20,40,80,0.85);

        color: #d8ecff;

        font-size: 15px;

        cursor: pointer;

        backdrop-filter: blur(10px);

        border: 1px solid rgba(120,180,255,0.25);

        box-shadow:
            0 0 18px rgba(0,140,255,0.25);

        transition: 0.25s;
    }

    #menuBtn:hover{

        transform: translateY(-2px);

        background: rgba(40,80,140,0.95);

        box-shadow:
            0 0 24px rgba(80,180,255,0.45);
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #0b0f19;
      color: #e2e8f0;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
      overflow: hidden;
      height: 100vh;
      width: 100vw;
    }
    #app {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      overflow: hidden;
    }
    #canvas-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 300px;
      min-height: 400px;
      position: relative;
    }
    canvas {
      border-radius: 12px;
      box-shadow: 0 0 40px rgba(0,200,255,0.08);
    }
    #panel {
      width: 360px;
      min-width: 280px;
      background: #111827;
      border-left: 1px solid #1f2937;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow-y: auto;
      box-sizing: border-box;
    }
    h2 {
      margin: 0 0 4px 0;
      color: #38bdf8;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 1px;
    }
    .subtitle {
      margin: 0;
      color: #64748b;
      font-size: 13px;
    }
    .card {
      background: #0f172a;
      border-radius: 10px;
      padding: 16px;
      border: 1px solid #1e293b;
    }
    .card label {
      color: #94a3b8;
      font-size: 12px;
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
    }
    input[type="range"] {
      width: 100%;
      accent-color: #38bdf8;
      cursor: pointer;
    }
    .range-labels {
      display: flex;
      justify-content: space-between;
      color: #e2e8f0;
      font-size: 14px;
      margin-top: 4px;
    }
    .range-val {
      font-weight: 700;
    }
    #alphaVal { color: #38bdf8; }
    #betaVal { color: #f472b6; }
    .btn-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    button {
      flex: 1;
      background: #1e293b;
      color: #e2e8f0;
      border: 1px solid #334155;
      padding: 10px 0;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      transition: all 0.2s;
      font-family: inherit;
    }
    button:hover {
      background: #27354f;
      border-color: #475569;
    }
    button.active-force {
      background: #0f172a;
      border-color: #38bdf8;
    }
    button.active-vector {
      background: #0f172a;
      border-color: #f472b6;
    }
    .force-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid #1e293b;
    }
    .force-row:last-child {
      border-bottom: none;
    }
    .dot-g { color: #fbbf24; }
    .dot-t { color: #38bdf8; }
    .dot-f { color: #f472b6; }
    .mono {
      color: #e2e8f0;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 14px;
    }
    .hint {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #1e293b;
      color: #64748b;
      font-size: 11px;
      text-align: center;
    }
    .hint-min {
      color: #4ade80;
      font-weight: 700;
    }
    .theory {
      color: #cbd5e1;
      font-size: 12px;
      line-height: 1.6;
    }
    .theory span { font-weight: 600; }
    .theory .form-g { color: #fbbf24; }
    .theory .form-a { color: #38bdf8; }

    @media (max-width: 720px) {
      #app { flex-direction: column; }
      #panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid #1f2937;
        max-height: 45vh;
      }
      #canvas-area { min-height: 450px; }
    }