body {
  font-family: "Iskoola Pota", "Noto Sans Sinhala", sans-serif;
  background: #f6f6f6;
  padding: 20px;
}

.wrapper {
  display: flex;
  flex-direction: row;  /* left-right layout */
  gap: 20px;            /* space between script & notation */
  align-items: flex-start; /* top-align */

}

textarea {
  flex: 0 0 45%;        /* 45% width, no shrinking */
  height: 80vh;
  font-size: 18px;

}

.notation-area {
  flex: 1 1 50%;        /* 50% width, can grow */
  border: 1px solid #ccc;
  padding: 10px;
  height: 80vh;

}



.controls {
  margin: 10px 0;
  display: flex;
  gap: 10px;
}

.controls button {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: #333;
  color: white;
}

.controls button:hover {
  background: #555;
}



@media print {
  body * {
    visibility: hidden;
  }

  .notation-area, .notation-area * {
    visibility: visible;
  }

  .notation-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none;
  }

}