: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:100dvh}
    /* left pane: the bezier editor fits only the left half */
    .left { width:50%; height:100%; position:absolute; box-sizing:border-box; border-right:1px solid rgba(255,255,255,0.02); }
    /* right pane: empty/placeholder */
    .right { width:50%; height:100%; }

    main{width:100%;height:100%;display:block}
    svg{width:100%;height:50%;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: 100dvh;
  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: #87E2D5;
background: linear-gradient(328deg, rgba(135, 226, 213, 1) 0%, rgba(160, 180, 224, 1) 38%, rgba(101, 166, 156, 1) 100%);
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


/* Split the screen in half */
.split {
  height: 100dvh;
  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 5px 0 0;
  border-style: solid;
  border-image: 
    linear-gradient(
	to bottom,
	rgba(118, 0, 18, 0.4), rgba(97, 0, 49, 0.4)
    ) 1 100%;        
}

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

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

.right-topleft {
    position: fixed;
    height: 50dvh;
    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: 27%;
  width: 100%;
height: auto;
  top: 0;
}


.svg-filter-1 {
    filter: brightness(0) saturate(100%) invert(24%) sepia(93%) saturate(2739%) hue-rotate(162deg) brightness(96%) contrast(97%) drop-shadow(0px 0px 5px rgba(24, 98, 90, 1)) drop-shadow(0px 0px 5px rgba(24, 98, 90, 1)) drop-shadow(0px 0px 5px rgba(24, 98, 90, 1)) drop-shadow(0px 0px 5px rgba(24, 98, 90, 1)) drop-shadow(0px 0px 5px rgba(24, 98, 90, 1));

}

.svg-filter-2 {
    filter: brightness(0) saturate(100%) invert(81%) sepia(48%) saturate(5407%) hue-rotate(116deg) brightness(96%) contrast(95%) drop-shadow(0px 0px 5px rgba(29, 214, 168, 1)) drop-shadow(0px 0px 5px rgba(29, 214, 168, 1)) drop-shadow(0px 0px 5px rgba(29, 214, 168, 1)) drop-shadow(0px 0px 5px rgba(29, 214, 168, 1)) drop-shadow(0px 0px 5px rgba(29, 214, 168, 1));
}

.svg-filter-3 {
    filter: brightness(0) saturate(100%) invert(82%) sepia(8%) saturate(7498%) hue-rotate(164deg) brightness(94%) contrast(96%) drop-shadow(0px 0px 5px rgba(81, 196, 235, 1)) drop-shadow(0px 0px 5px rgba(81, 196, 235, 1)) drop-shadow(0px 0px 5px rgba(81, 196, 235, 1)) drop-shadow(0px 0px 5px rgba(81, 196, 235, 1)) drop-shadow(0px 0px 5px rgba(81, 196, 235, 1));
}

.svg-filter-4 {
    filter: brightness(0) saturate(100%) invert(60%) sepia(9%) saturate(1533%) hue-rotate(202deg) brightness(93%) contrast(85%) drop-shadow(0px 0px 5px rgba(139, 138, 194, 1)) drop-shadow(0px 0px 5px rgba(139, 138, 194, 1)) drop-shadow(0px 0px 5px rgba(139, 138, 194, 1)) drop-shadow(0px 0px 5px rgba(139, 138, 194, 1)) drop-shadow(0px 0px 5px rgba(139, 138, 194, 1));
}

.svg-filter-5 {
    filter: brightness(0) saturate(100%) invert(37%) sepia(10%) saturate(469%) hue-rotate(332deg) brightness(94%) contrast(79%);
}



.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;
  }
}