: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;
  overflow-y: hidden;  
  padding-top: 0px;
}

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

}

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

body {
    background: #B8AC87;
background: linear-gradient(289deg,rgba(184, 172, 135, 1) 0%, rgba(181, 143, 27, 1) 48%, rgba(117, 92, 18, 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 10px 0 0;
  border-style: solid;
  border-image: 
    linear-gradient(
	to bottom,
	rgba(208, 198, 231, 0.6), rgba(180, 150, 210, 0.7)
    ) 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;
}

.svg-filter {
    filter: brightness(0) saturate(100%) invert(45%) sepia(12%) saturate(1950%) hue-rotate(170deg) brightness(88%) contrast(85%) drop-shadow(0 0 10px rgba(96, 165, 250, 0.8)); /* Adjust blur, color, and opacity */

}

.fillpicture {

  position: absolute;
  left: 0;
  width: 2400% !important;
  height: 100%;
  overflow: hidden;

/*  object-fit: cover;
  object-position: left top; */

  /* 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); */
}


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


.softglow {
  filter: blur(2px);
}

.fillarea {
fill: #2d3e45;
}

/* Mobile portrait mode optimizations */
@media screen and (orientation: portrait) {
  .split, .left, .right {
    overflow: hidden !important;
  }
  .left { width:50%; height:50%; position:relative; box-sizing:border-box; border-right:1px solid rgba(255,255,255,0.02); }
.fillpicture {

}

}