:root { --bg: #0b1220; --fg: #e6eef8; --muted: #9aa9bf; --accent: #60a5fa; }
    html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;}
    body{background:linear-gradient(180deg,#071027 0%, #0c1726 100%);color:var(--fg);display:flex;flex-direction:row;min-height:100%}
    /* left pane: the bezier editor fits only the left half */
    .left { width:50%; height:100%; position:relative; box-sizing:border-box; border-right:1px solid rgba(255,255,255,0.02); }
    /* right pane: empty/placeholder */
    .right { flex:1; height:100%; }

    main{width:100%;height:100%;display:block}
    svg{width:100%;height:100%;display:block;touch-action:none}
    .overlay{position:absolute;left:14px;bottom:14px;background:rgba(3,7,18,0.65);padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);font-size:13px;color:var(--muted);max-width:360px;pointer-events:auto}
    .hint{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.3}
    .title{font-weight:600;color:var(--fg);margin-bottom:6px}
    .small-note{position:absolute;right:14px;bottom:14px;background:rgba(3,7,18,0.5);padding:8px;border-radius:8px;font-size:12px;color:var(--muted);pointer-events:none}   /* Split the screen in half */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

/* Control the left side */
.left {
    left: 0;

}

/* Control the right side */
.right {
  right: 0;
/*  background-color: red; */
}

body {
background: #6AC88A;
background: linear-gradient(242deg, rgba(106, 200, 138, 1) 0%, rgba(94, 224, 107, 1) 9%, rgba(153, 247, 109, 1) 57%, rgba(126, 217, 153, 1) 84%, rgba(120, 222, 176, 1) 100%);

  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


/* Split the screen in half */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

/* Control the left side */
.left {
    left: 0;
  border-width: 0 7px 0 0;
  border-style: solid;
  border-image: 
    linear-gradient(
	to bottom,
	rgba(70, 20, 20, 0.3), rgba(90, 70, 20, 0.6)
    ) 1 100%;    
}

/* Control the right side */
.right {
/*  background-color: #FFFFE8; */
}

.right-topright {
    position: fixed;
    height: 50%;
    right: 0;
    width: 25%;  /* 4 items per row */
    top: 0; 
      height: 50%;
}

.right-topleft {
    position: fixed;
    height: 50%;
    top: 0; /* 2 rows */    
  left: 50%;
  width: 25%;  /* 4 items per row */
  height: 50%; /* 2 rows */
}

.right-bottomright {
    position: fixed;
    right: 0;
        bottom: 0;
  width: 25%;  /* 4 items per row */
  height: 50%; /* 2 rows */
}

.right-bottomleft {
    position: fixed;
    left: 50%;
    bottom: 0;
  width: 25%; 
  height: 50%;
}



body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
 
.floating {
   position: -webkit-sticky;
   position: sticky;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 9999;
}

.fillpicture {
  position: absolute;
right: 0%;
top: 46%;
  width: 90%;
height: auto;
  /* CSS filter to make waveform stroke appear thicker */
  filter:
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 1px black);
}


.noteline-parent {
    position: absolute;
    top: 50%;

  width: fit-content;
  height: fit-content;
}

.all-notelines { position: absolute; top: -150px }
/* Notelines - stacked 5px apart */
.noteline1,
.noteline2,
.noteline3,
.noteline4,
.noteline5 {
  position: absolute;
  left: 0;
  width: 50vw;
  height: auto;
  pointer-events: none;
  /* CSS filter to make waveform stroke appear thicker */
  filter:
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 1px black);
}

.noteline1 { top: -120px; }
.noteline2 { top: -100px; }
.noteline3 { top: -80px; }
.noteline4 { top: -60px; }
.noteline5 { top: -40px; }

.notehead-parent {
  position: relative;
  padding-left: 100px;
  width: fit-content;
  height: fit-content;
  display: table;
  width: 40vw;
  table-layout: auto; 
}

/* Noteheads - evenly spaced horizontally */
.notehead1,
.notehead2,
.notehead3 {
    display: table-cell;
    position: relative;
    top: -120px;
    
    text-align: center;
  width: 30px !important;
  height: auto;
}

.notehead-first {
    top: 30px;
}

.notehead-second {
    top: 10px;
   
}

.notehead-third {
  top: 50px;
}


.notehead { z-index: 10; position: relative; width: 30px !important; }
.stem { z-index: 9; height: 100px !important; position: relative; left: 48px; }
.stem-first { top: 34px; }
.stem-second { top: 80px; left: 26px; rotate: 180deg;         transform: scaleX(-1);
 }
.stem-third { top: 50px; }

.clef {
  position: absolute;
  left: 40px;
  top: -80px;
  height: 200px;
  width: auto;  
  z-index: 10;
}


.glow {
  filter: blur(6px);
}


.gradient {
  background: linear-gradient(
    to bottom,
    #67597A 0%,
    #544E61 100%
  );
}

/* Mobile portrait mode optimizations */
@media screen and (orientation: portrait) {
  .split, .left, .right {
    overflow: hidden !important;
  }
  .noteline-parent {
    position: absolute;
    top: 50%;

  width: 100%;
  height: 100%;
  }
  
  .noteline1,
.noteline2,
.noteline3,
.noteline4,
.noteline5 {
      width: 50vh;

  }  
  .notehead-parent {
      width: 40vh; }

  .all-notelines { position: static; top: -150px }
      .left { width:50%; height:50%; position:relative; box-sizing:border-box; border-right:1px solid rgba(255,255,255,0.02); }
}