body {
      margin: 0;
      padding: 0;
      background: #000;
      color: white;
      font-family: Arial, sans-serif;
    }

    .content {
      width: min(96vw, 1700px);
      margin: 16px auto 24px auto;
    }

    .title {
      margin: 0 0 10px 0;
      font-size: 34px;
      font-weight: 700;
      line-height: 1.2;
    }

    .intro,
    .bottom-text {
      width: 100%;
      font-size: 14px;
      line-height: 1.45;
    }

    .intro {
      margin-bottom: 14px;
    }

    .bottom-text {
      margin-top: 14px;
    }

    .intro p,
    .bottom-text p {
      margin: 0 0 8px 0;
    }

    .copyright {
      margin-top: 18px;
      font-size: 13px;
      color: #aaa;
      text-align: center;
    }

    .formula {
      margin: 6px 0 8px 0;
      font-size: 18px;
      font-weight: 700;
    }

    #app {
      display: flex;
      gap: 18px;
      align-items: stretch;
      width: 100%;
      height: 72vh;
      min-height: 620px;
      background: #000;
    }

    #side-panel {
      flex: 0 0 450px;
      width: 450px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    #pane {
      width: 100%;
      height: fit-content;
      max-height: 100%;
      overflow-y: auto;
      z-index: 10;
    }

    #freq-info {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 14px;
      border: 1px solid #333;
      border-radius: 6px;
      background: #111;
      color: white;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.3;
    }

    #spectrum-panel {
      width: 100%;
      box-sizing: border-box;
      padding: 12px;
      border: 1px solid #333;
      border-radius: 6px;
      background: #111;
    }

    #spectrum-title {
      margin: 0 0 10px 0;
      font-size: 16px;
      font-weight: 700;
      color: white;
    }

    #spectrum-canvas {
      display: block;
      width: 100%;
      height: 280px;
      background: #050505;
      outline: 1px solid #333;
    }

    #sketch {
      flex: 1 1 auto;
      min-width: 0;
      height: 100%;
      background: #000;
    }

    #sketch canvas {
      display: block;
      outline: 1px solid #333;
    }

    @media (max-width: 1000px) {
      #app {
        min-height: 560px;
      }

      #side-panel {
        flex: 0 0 390px;
        width: 390px;
      }

      #spectrum-canvas {
        height: 240px;
      }
    }

    @media (max-width: 760px) {
      #app {
        flex-direction: column;
        height: auto;
        min-height: 0;
      }

      #side-panel {
        flex: none;
        width: 100%;
      }

      #sketch {
        width: 100%;
        height: 520px;
      }
    }