*{box-sizing:border-box}html,body,main,#root{margin:0;padding:0}body{font-family:"Press Start 2P",cursive;color:#000;background:#202025}.content{padding:0}.staff-lines{position:relative;width:100%;height:120px;border-left:2px solid black;margin-top:20px}.line{height:2px;background:#000;position:absolute;left:0;right:0}.line:nth-child(1){top:0}.line:nth-child(2){top:20px}.line:nth-child(3){top:40px}.line:nth-child(4){top:60px}.line:nth-child(5){top:80px}.note{position:absolute;width:12px;height:12px;background:#000;border-radius:50%}.note.c{top:76px;left:50px}.note.d{top:68px;left:80px}.note.e{top:60px;left:110px}.note.f{top:52px;left:140px}.note.g{top:44px;left:170px}.note.a{top:36px;left:200px}.note.b{top:28px;left:230px}.header{position:absolute;top:30px;left:50%;transform:translate(-50%);z-index:10;display:flex;gap:10px}.header button{font-family:"Press Start 2P",cursive;padding:8px 16px;border:none;background:none;font-size:14px;color:#fff}